W przedstawionej definicji stylu CSS, powtarzanie dotyczy
body { background-image: url("rysunek.gif"); background-repeat: repeat-y; }
A. tła każdego ze znaczników akapitu.
B. rysunku umieszczonego w tle strony w poziomie.
C. rysunku umieszczonego w tle strony w pionie.
D. rysunku umieszczonego znacznikiem img.
Pytanie z egzaminu CKE, czerwiec 2017 (arkusz E.14-X-17.06).
W tej regule CSS selektor body oznacza, że styl dotyczy całej zawartości strony, a dokładniej tła elementu body. Właściwość background-image: url("rysunek.gif") ustawia obraz jako tło strony, natomiast background-repeat: repeat-y określa sposób jego powtarzania. Wartość repeat-y oznacza powtarzanie tylko w pionie, czyli wzdłuż osi Y, od góry do dołu. Obraz nie będzie automatycznie powielany poziomo, chyba że użyto by repeat, albo osobno ustawiono inną konfigurację tła. W praktyce taki zapis bywa używany np. do tworzenia pionowego wzoru, paska ozdobnego po lewej stronie strony albo tekstury, która ma ciągnąć się przez całą wysokość dokumentu. Moim zdaniem to jedna z tych właściwości CSS, które warto kojarzyć z układem współrzędnych: X to poziom, Y to pion. Zgodnie z dobrymi praktykami CSS tło dekoracyjne powinno być ustawiane właśnie przez background-image, a nie przez znacznik img, bo img służy raczej do treści istotnej semantycznie, na przykład zdjęcia produktu albo ilustracji w artykule.
W tym fragmencie kodu łatwo pomylić obraz w tle z normalnym obrazkiem wstawionym do dokumentu HTML. Właściwość background-image nie dodaje elementu img do strony, tylko ustawia grafikę jako tło wybranego elementu. To ważna różnica praktyczna: obrazek wstawiony znacznikiem img jest częścią treści dokumentu, może mieć atrybut alt, zajmuje miejsce w układzie strony i jest istotny semantycznie. Tło CSS jest zwykle dekoracją i nie powinno przenosić kluczowej informacji dla użytkownika. Tutaj selektorem jest body, więc reguła odnosi się do tła całej strony, a nie do tła akapitów. Gdyby chodziło o akapity, selektor wyglądałby raczej tak: p { ... }. Częsty błąd myślowy polega na patrzeniu tylko na samą nazwę pliku rysunek.gif i pomijaniu selektora oraz właściwości CSS, a to właśnie one mówią, czego dotyczy styl. Wartość repeat-y również ma konkretne znaczenie: powtarzanie odbywa się w pionie, wzdłuż osi Y. Powtarzanie w poziomie byłoby zapisane jako repeat-x. Z mojego doświadczenia najlepiej zapamiętać to podobnie jak w układzie współrzędnych: oś X biegnie lewo-prawo, a oś Y góra-dół. Dlatego w tej definicji nie chodzi ani o znacznik img, ani o akapity, ani o poziome powielanie grafiki, tylko o pionowe powtarzanie obrazka ustawionego jako tło elementu body.