W CSS tło elementu można zdefiniować, wskazując plik obrazu oraz sposób jego powtarzania. Za wczytanie grafiki odpowiada właściwość background-image z funkcją url(). Natomiast o tym, czy i jak obraz ma się kafelkować, decyduje background-repeat.
Jeżeli warunek brzmi: "obraz ma powtarzać się jedynie w poziomie", oznacza to, że kafelkowanie ma zachodzić w osi poziomej (X), a w pionie (Y) obraz nie powinien być powielany. Dokładnie temu odpowiada wartość repeat-x dla background-repeat.
- {background-image: url("rys.png"); background-repeat: repeat-x;} – poprawne: powtarza obraz wyłącznie poziomo.
- {background-image: url("rys.png"); background-repeat: repeat;} – nie spełnia warunku "jedynie", ponieważ powtarza w poziomie i w pionie.
- {background-image: url("rys.png"); background-repeat: round;} – to inny mechanizm: przeglądarka może skalować kafelki tak, aby zmieściły się całkowitą liczbą powtórzeń w danym obszarze; nie oznacza "tylko poziomo".
- {background-image: url("rys.png"); background-repeat: repeat-y;} – błędne kierunkowo: powtarza tylko w pionie.
Wskazówka egzaminacyjna: zapamiętaj skrót myślowy: repeat-x = wzdłuż osi X (poziomo), repeat-y = wzdłuż osi Y (pionowo). Zwracaj też uwagę na słowo "jedynie/tylko", bo eliminuje ono wartości, które działają w obu kierunkach.
