Tło - CSS
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 - MSIE 8, ale nie 9.0; Firefox)
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.
Ponadto należy zwrócić uwagę, że MSIE 6 obsługuje wartość fixed tylko dla elementów przewijalnych (w MSIE 7.0 wszystko jest w porządku).
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 (obsługuje Firefox, Opera, MSIE 7.0). Przewiń stronę, obserwując grafikę w tle tego akapitu...
To jest akapit z nieruchomym tłem obrazkowym (obsługuje Firefox, Opera, MSIE 7.0). Przewiń stronę, obserwując grafikę w tle tego akapitu...
To jest akapit z nieruchomym tłem obrazkowym (obsługuje Firefox, Opera, MSIE 7.0). 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 (obsługuje MSIE 8, Firefox). 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 (obsługuje MSIE 8, Firefox). 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 (obsługuje MSIE 8, Firefox). 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 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)
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.
W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "scroll"!
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.