Zaczepienie tła obrazkowego {background-attachment}
Jak zrobić tło graficzne (obrazek, zdjęcie), które nie przesuwa się przy przewijaniu strony?
Zaczepienie tła obrazkowego {background-attachment}
selektor { background-attachment: zaczepienie }- scroll - przewijanie tła (domyślnie)
- fixed - tło nieruchome względem okna przeglądarki
- local - tło nieruchome względem elementu (jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3)
Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia:
body { background-image: url(obrazek.jpg); background-attachment: fixed }Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe.
Różnica pomiędzy wartościami "fixed" a "local" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku kiedy przewijamy całą stronę albo kiedy sam element nie ma suwaków, wartość ta działa identycznie jak "scroll".
Przykład {background-attachment}
To jest akapit z nieruchomym tłem obrazkowym. Przewiń stronę, obserwując grafikę w tle tego akapitu...
To jest akapit z nieruchomym tłem obrazkowym. Przewiń stronę, obserwując grafikę w tle tego akapitu...
To jest akapit z nieruchomym tłem obrazkowym. Przewiń stronę, obserwując grafikę w tle tego akapitu...
Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...
Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...
Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...
To jest akapit z lokalnie nieruchomym tłem obrazkowym. Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...
To jest akapit z lokalnie nieruchomym tłem obrazkowym. Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...
To jest akapit z lokalnie nieruchomym tłem obrazkowym. Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...
Strona z użyciem background-attachment: scroll - Przykład 1
Strona z użyciem background-attachment: fixed - Przykład 2
Strona z użyciem background-attachment: fixed (oraz no-repeat i center) - Przykład 3
Wielokrotne zaczepienie
CSS 3
selektor { background-attachment: zaczepienie obrazka 1, zaczepienie obrazka 2,... }Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób zaczepienia. Jeżeli pominiemy ustawienie sposobu zaczepienia następnych obrazków, przejmą one ustawienia z pierwszego.
Pytania i odpowiedzi
Co to "background-attachment"?
background-attachment to właściwość CSS, która określa, czy tło elementu ma pozostać nieruchome względem okna przeglądarki, czy przewijać się wraz z zawartością strony.
Którą z wartości "background-attachment" w języku CSS należy wybrać, aby tło strony było nieruchome względem okna przeglądarki?
Aby tło strony było nieruchome względem okna przeglądarki, należy użyć wartości fixed dla właściwości background-attachment.
Jak zablokować tło w CSS?
Aby zablokować tło w CSS i sprawić, że będzie ono nieruchome względem okna przeglądarki, użyj wartości fixed dla właściwości background-attachment w deklaracji tła.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
background-attachment: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |
background-attachment: fixed | 1 2008-12-11 | 2 2006-10-24 | 12 2015-07-29 | 10.5 2010-03-02 | 15.4 2022-03-14 |
background-attachment: local | 1 2008-12-11 | 25 2013-10-29 | 12 2015-07-29 | 10.5 2010-03-02 | 15.4 2022-03-14 |
background-attachment: scroll | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |
background-attachment: wartość /* multiple backgrounds */ | 1 2008-12-11 | 3.6 2010-01-21 | 12 2015-07-29 | 10.5 2010-03-02 | 1.3 2005-04-15 |