CSS background-attachment

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS background-attachment

Właściwość background-attachment określa, czy obraz tła ma przewijać się razem z elementem/stroną, czy pozostać nieruchomy względem okna przeglądarki.

Najważniejsza wartość w pytaniach egzaminacyjnych to:

body {
  background-image: url("tlo.jpg");
  background-attachment: fixed;
}

Wartość fixed sprawia, że tło pozostaje nieruchome względem okna przeglądarki. Podczas przewijania strony treść przesuwa się, ale obraz tła zostaje w tym samym miejscu.

Najczęstsze wartości

  • scroll – wartość domyślna; tło przewija się razem ze stroną lub elementem.
  • fixed – tło jest nieruchome względem okna przeglądarki.
  • local – tło przewija się razem z zawartością elementu, jeśli element ma własne przewijanie.
  • inherit – wartość jest dziedziczona po elemencie nadrzędnym.

Przykład efektu nieruchomego tła

body {
  background-image: url("las.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

Taki zapis często stosuje się do uzyskania efektu podobnego do parallax, czyli wrażenia, że treść przesuwa się nad nieruchomym tłem.

Zapamiętaj na egzamin

Jeśli w pytaniu pojawia się sformułowanie: „tło ma pozostać nieruchome względem okna przeglądarki”, poprawną wartością jest zawsze:

background-attachment: fixed;