KWALIFIKACJA INF3 - STYCZEŃ 2018

PYTANIE NR 9.
Który z atrybutów background-attachment w języku CSS należy wybrać, aby tło strony było nieruchome względem okna przeglądarki?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Wartość fixed dla właściwości background-attachment powoduje, że obraz tła pozostaje nieruchomy względem okna przeglądarki (viewport) podczas przewijania strony. Pozostałe wartości dotyczą przewijania tła wraz z dokumentem/elementem albo dziedziczenia ustawień.

Pełne wyjaśnienie:

Właściwość background-attachment w CSS określa, względem czego ma być "przyczepione" tło (czyli czy tło przesuwa się podczas scrollowania, czy pozostaje w stałym położeniu).

Odpowiedź fixed jest poprawna, ponieważ powoduje, że tło jest nieruchome względem okna przeglądarki (viewport). Gdy użytkownik przewija stronę, treść dokumentu przesuwa się, ale tło pozostaje "na miejscu" i daje efekt stałego tła.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • scroll oznacza zachowanie domyślne w wielu przypadkach: tło przewija się wraz z dokumentem, czyli zmienia położenie podczas przewijania strony. Nie spełnia warunku "nieruchome względem okna przeglądarki".
  • local wiąże tło z obszarem przewijania elementu. W praktyce tło może przesuwać się wraz z zawartością elementu podczas jego wewnętrznego przewijania (np. w kontenerze z overflow). Nie jest to "przyklejenie" do viewportu.
  • inherit to wartość globalna, która każe dziedziczyć wartość właściwości od elementu nadrzędnego. Sama w sobie nie opisuje konkretnego efektu "stałego tła" – efekt zależy od tego, co ustawiono wyżej w drzewie DOM.

Wskazówka egzaminacyjna: jeśli w pytaniu pojawia się sformułowanie "nieruchome względem okna przeglądarki", szukaj wartości odnoszącej się do viewportu, a nie do przewijania dokumentu lub elementu.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Właściwość background-attachment określa, czy tło elementu przesuwa się podczas przewijania, czy pozostaje przyczepione do okna przeglądarki. Najczęściej używa się jej do uzyskania efektu stałego tła lub standardowego przewijania tła razem z treścią.
Aby tło było nieruchome względem viewportu, ustaw background-attachment: fixed; dla elementu, którego tło ma być "przyklejone" (często dla body). Wtedy przewijasz treść, ale obraz tła nie zmienia położenia w oknie przeglądarki.
Wartość scroll powoduje, że tło przewija się razem z dokumentem (lub obszarem elementu), czyli jego pozycja zmienia się podczas scrollowania strony. To przeciwieństwo efektu "nieruchomego tła", więc nie spełnia warunku "względem okna przeglądarki".
local wiąże tło z obszarem przewijania elementu. Gdy element ma własny scroll (np. przez overflow), tło może poruszać się wraz z jego zawartością. Stosuje się to raczej w przewijanych kontenerach, a nie do "przyklejenia" tła do viewportu.
Nie bezpośrednio. inherit oznacza dziedziczenie wartości od elementu nadrzędnego. Jeśli rodzic ma ustawione fixed, wtedy efekt może być "stały", ale sama wartość inherit nie opisuje zachowania tła — tylko sposób pobrania ustawienia.
Viewport to widoczny obszar okna przeglądarki. Dokument (strona) może być wyższy i wtedy przewijasz jego zawartość. W pytaniach egzaminacyjnych sformułowanie "względem okna przeglądarki" wskazuje na odniesienie do viewportu, a nie do treści dokumentu.
Najczęściej spotkasz wartości scroll, fixed i local oraz wartości globalne typu inherit. Na egzaminie zwykle sprawdza się zrozumienie, czy tło ma przewijać się z treścią, być przyczepione do viewportu, czy zależeć od przewijania elementu.
Nie zawsze. Na części przeglądarek mobilnych "stałe tło" może działać inaczej ze względu na optymalizacje renderowania i sposób przewijania. Na egzaminie zazwyczaj chodzi o definicję właściwości i wybór poprawnej wartości, a nie o niuanse implementacyjne konkretnych silników.
Najczęstszy błąd to wybór scroll, bo kojarzy się z przewijaniem, mimo że pytanie dotyczy unieruchomienia tła. Drugi błąd to interpretacja local jako "lokalne względem okna", choć chodzi o przewijanie w obrębie elementu.
Zrób krótkie ćwiczenia: ustaw tło dla body i dla przewijanego kontenera (overflow) oraz porównaj fixed, scroll i local. Ucz się też wartości globalnych (np. inherit), żeby nie mylić ich z wartościami dającymi konkretny efekt wizualny.
info

Około 59% zdających odpowiada poprawnie na to pytanie. średnie

Specjaliści zwracają uwagę: "Wartość fixed dla właściwości background-attachment powoduje, że obraz tła pozostaje nieruchomy względem okna przeglądarki (viewport) podczas przewijania strony."

Źródła:

  • MDN Web Docs: "background-attachment" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment (accessed 2026-02-28)
  • W3C: "CSS Backgrounds and Borders Module Level 3" — section on background-attachment — https://www.w3.org/TR/css-backgrounds-3/ (accessed 2026-02-28)
  • web.dev: "Learn CSS" (backgrounds / background properties) — https://web.dev/learn/css/backgrounds/ (accessed 2026-02-28)

Materiały:

  • Dokumentacja MDN dotycząca background-attachment
  • Specyfikacja CSS Backgrounds and Borders
  • Ćwiczenia praktyczne: porównanie fixed/scroll/local na prostych przykładach HTML+CSS

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego