Przejdź do treści

Tło

Zaczepienie

selektor { background-attachment: zaczepienie }
Jako "zaczepienie" należy wpisać:
  • 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)
[Zobacz także: Wstawianie stylów]

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:

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"!

Zobacz także

Więcej tematów

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...