CSS background-repeat

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS background-repeat

Właściwość background-repeat określa, czy i w jaki sposób obraz ustawiony jako tło elementu ma być powtarzany. Najczęściej używa się jej razem z background-image, czyli właściwością wskazującą plik graficzny tła.

Najważniejsze wartości

  • repeat — obraz powtarza się w poziomie i w pionie; jest to wartość domyślna,
  • no-repeat — obraz nie jest powtarzany,
  • repeat-x — obraz powtarza się tylko w poziomie,
  • repeat-y — obraz powtarza się tylko w pionie,
  • round — obraz jest skalowany tak, aby wypełnił obszar bez przycinania,
  • space — obrazy są rozmieszczane z odstępami między nimi.

Przykład: powtarzanie tylko w poziomie

body {
  background-image: url('rys.png');
  background-repeat: repeat-x;
}

Taki zapis ustawia obraz rys.png jako tło strony i powtarza go wyłącznie w osi poziomej, czyli od lewej do prawej strony. W pionie obraz nie będzie się powielał.

Typowy błąd egzaminacyjny

Wartość repeat oznacza powtarzanie w obu kierunkach, a nie tylko w poziomie. Jeśli w poleceniu pojawia się sformułowanie „tylko w poziomie”, należy użyć repeat-x. Analogicznie „tylko w pionie” oznacza repeat-y.