W języku CSS, należy zdefiniować tło dokumentu jako obraz rys.png. Obraz ma powtarzać się jedynie w poziomie. Którą definicję należy przypisać selektorowi body?
A. {background-image: url("rys.png"); background-repeat: repeat-y;}
B. {background-image: url("rys.png"); background-repeat: repeat-x;}
C. {background-image: url("rys.png"); background-repeat: round;}
D. {background-image: url("rys.png"); background-repeat: repeat;}
Pytanie z egzaminu CKE, czerwiec 2021 (arkusz EE.09-SG-21.06).
W selektorze body trzeba ustawić obraz tła przez background-image: url('rys.png') oraz sposób jego powtarzania przez background-repeat: repeat-x. W CSS wartość repeat-x oznacza powtarzanie obrazu tylko w osi poziomej, czyli wzdłuż osi X, od lewej do prawej strony dokumentu. W pionie obraz nie będzie dokładany kolejny raz, więc nie powstanie kafelkowanie w dół strony. Taki zapis jest zgodny ze standardowym działaniem właściwości background-repeat i jest bardzo często używany np. przy paskach, teksturach nagłówka, gradientach zapisanych jako mały obrazek albo dekoracyjnym tle, które ma tworzyć ciągłą linię przez całą szerokość strony. Moim zdaniem to jedna z tych właściwości CSS, które warto kojarzyć praktycznie: repeat-x = poziomo, repeat-y = pionowo. Dobra praktyka to też pilnować poprawnej ścieżki do pliku graficznego, bo url('rys.png') zakłada, że plik rys.png znajduje się względem arkusza CSS w odpowiednim katalogu. Pełna definicja może więc wyglądać tak: body { background-image: url('rys.png'); background-repeat: repeat-x; }.
W tym zadaniu kluczowe jest rozróżnienie, co dokładnie robią poszczególne wartości właściwości background-repeat. Samo ustawienie background-image: url('rys.png') tylko wskazuje plik graficzny, który ma zostać użyty jako tło. O tym, jak ten obraz będzie układany na stronie, decyduje dopiero background-repeat. Jeśli użyje się wartości repeat, przeglądarka będzie kafelkować obraz zarówno w poziomie, jak i w pionie. To jest domyślne zachowanie dla tła obrazkowego i często prowadzi do efektu takiej tapety na całej stronie. W tym pytaniu nie o to chodzi, bo obraz ma powtarzać się jedynie poziomo. Wartość repeat-y działa odwrotnie do wymagania: powtarza grafikę tylko w pionie, czyli wzdłuż osi Y, z góry na dół. Typowy błąd polega tu na myleniu osi X i Y, szczególnie gdy ktoś kojarzy je bardziej z matematyką niż z układem strony w przeglądarce. Z kolei round nie oznacza zwykłego powtarzania w jedną stronę. Ta wartość powoduje, że obraz tła jest powtarzany i skalowany tak, aby kafelki wypełniły dostępny obszar bez ucinania. Może to zmienić rozmiar grafiki, więc nie spełnia warunku prostego powtarzania tylko po szerokości. Z mojego doświadczenia najlepiej zapamiętać to prosto: repeat-x stosuje się dla poziomych pasków tła, repeat-y dla pionowych wzorów, a repeat dla pełnego kafelkowania. W praktycznym CSS taka różnica ma spore znaczenie, bo źle dobrane powtarzanie potrafi od razu zepsuć wygląd całego layoutu.