Wskaż deklaracje kodu CSS, które wyświetlą obraz "kolo.png" w sposób przedstawiony na rysunku
A. background-image: kolo.png; background-repeat : repeat-x;
B. background-image: src="kolo.png" alt="nagłówek" height="50" width="50" repeat;
C. background-image: url(kolo.png); background-repeat : repeat-x;
D. background-image: url(kolo.png); background-repeat : repeat;
Deklaracja background-image: url(kolo.png); background-repeat: repeat-x; jest poprawna, bo używa właściwej składni CSS do ustawienia obrazu jako tła elementu oraz określa sposób jego powtarzania. W CSS właściwość background-image nie przyjmuje samej nazwy pliku, tylko funkcję url(), w której podaje się ścieżkę do grafiki. Dzięki temu przeglądarka wie, że ma pobrać plik kolo.png i użyć go jako obrazu tła. Druga część, czyli background-repeat: repeat-x;, oznacza powtarzanie tła tylko w osi poziomej, czyli od lewej do prawej. To dokładnie daje efekt widoczny na rysunku: kółko pojawia się wiele razy w jednym rzędzie, jak ozdobny pasek nad nagłówkiem. W praktyce tak robi się np. dekoracyjne belki, ornamenty, tekstury albo małe ikony powtarzane w tle nagłówka. Z mojego doświadczenia warto też pamiętać, że dziś często stosuje się skróconą właściwość background, ale zapis rozdzielony na background-image i background-repeat jest bardzo czytelny, szczególnie przy nauce CSS. Dobrą praktyką jest też pilnowanie poprawnej ścieżki do pliku, np. url(obrazy/kolo.png), jeśli grafika znajduje się w osobnym katalogu.
W tym zadaniu kluczowe jest rozróżnienie między składnią CSS a składnią HTML. Sam zapis background-image: kolo.png; wygląda na intuicyjny, ale dla przeglądarki nie jest poprawną wartością właściwości background-image. CSS wymaga tutaj użycia funkcji url(), ponieważ nazwa pliku musi być potraktowana jako adres zasobu graficznego. Bez url() deklaracja zostanie zwykle zignorowana, więc obrazek w tle po prostu się nie pojawi. To częsty błąd, bo człowiek widzi nazwę pliku i myśli: no przecież wiadomo, o co chodzi, ale parser CSS działa według ścisłych reguł. Zapis background-repeat: repeat; też nie pasuje do przedstawionego efektu, ponieważ repeat powiela tło zarówno poziomo, jak i pionowo. W rezultacie kółka układałyby się w siatkę, a nie tylko w jeden poziomy pasek nad nagłówkiem. Jeżeli na rysunku elementy idą tylko wzdłuż osi X, trzeba użyć repeat-x. Jeszcze inny problem pojawia się przy mieszaniu atrybutów HTML z deklaracjami CSS, na przykład src, alt, height i width. Takie atrybuty są typowe dla znacznika img w HTML, a nie dla właściwości background-image. Obrazek tła nie ma atrybutu alt, bo nie jest treścią strony, tylko elementem prezentacyjnym. Moim zdaniem to ważna różnica praktyczna: jeśli grafika niesie informację, lepiej użyć img z sensownym opisem alternatywnym, a jeśli jest dekoracją, można zastosować tło CSS. Poprawny zapis powinien więc wskazać plik przez url(kolo.png) i ustawić powtarzanie tylko poziome przez repeat-x.