Kurs HTML

Wprowadzenie: Kontrola nad kafelkowaniem

Jak widzieliśmy w poprzedniej lekcji, domyślnie obraz tła (ustawiony przez background-image) jest powtarzany (kafelkowany) zarówno w poziomie, jak i w pionie, aby wypełnić całą przestrzeń tła elementu.

Właściwość background-repeat pozwala precyzyjnie kontrolować to zachowanie, określając, czy i jak obraz tła ma być powtarzany.

Wartości background-repeat

Właściwość background-repeat może przyjmować następujące wartości:

• repeat: (Domyślne) Obraz jest powtarzany w obu kierunkach (poziomo i pionowo), aby wypełnić całe tło. Ostatni obraz może zostać obcięty, jeśli nie mieści się w całości.
• repeat-x: Obraz jest powtarzany tylko w poziomie (wzdłuż osi X).
• repeat-y: Obraz jest powtarzany tylko w pionie (wzdłuż osi Y).
• no-repeat: Obraz nie jest powtarzany. Pojawi się tylko raz, w swojej domyślnej pozycji (zazwyczaj lewy górny róg, ale można to zmienić za pomocą background-position).
• space: Obraz jest powtarzany tyle razy, ile się zmieści w całości, bez obcinania. Przestrzeń między obrazami jest równomiernie rozkładana. Pierwszy i ostatni obraz są przyklejone do krawędzi elementu.
• round: Obraz jest powtarzany tyle razy, ile się zmieści. Jeśli po równomiernym rozłożeniu pozostaje dodatkowa przestrzeń, obrazy są skalowane (rozciągane), aby wypełnić całą przestrzeń bez przerw.

Można również podać dwie wartości, oddzielone spacją, aby niezależnie kontrolować powtarzanie w poziomie i pionie. Pierwsza wartość dotyczy osi X, druga osi Y. Na przykład:

• background-repeat: repeat no-repeat; oznacza powtarzanie w poziomie (repeat-x) i brak powtarzania w pionie.
• background-repeat: no-repeat repeat; oznacza brak powtarzania w poziomie i powtarzanie w pionie (repeat-y).

<div class="box repeat-example">repeat (domyślne)</div>
<div class="box repeat-x-example">repeat-x</div>
<div class="box repeat-y-example">repeat-y</div>
<div class="box no-repeat-example">no-repeat</div>
<div class="box space-example">space</div>
<div class="box round-example">round</div>Kopiuj

.box {
  width: 250px;
  height: 120px;
  border: 1px solid black;
  margin-bottom: 10px;
  background-image: url('icon.png'); /* Zakładamy małą ikonę 32x32px */
  background-color: #eee;
  color: black;
  padding: 5px;
}

.repeat-example   { background-repeat: repeat; }
.repeat-x-example { background-repeat: repeat-x; }
.repeat-y-example { background-repeat: repeat-y; }
.no-repeat-example{ background-repeat: no-repeat; }
.space-example    { background-repeat: space; }
.round-example    { background-repeat: round; }
Kopiuj

Aby zobaczyć różnice między space i round, najlepiej eksperymentować z różnymi rozmiarami kontenera i obrazu tła.

Zastosowania

• no-repeat: Najczęstsze użycie, gdy chcemy, aby obraz tła (np. logo, duży obraz hero) pojawił się tylko raz. Zazwyczaj łączone z background-position i background-size.
• repeat-x: Przydatne do tworzenia poziomych wzorów, linii lub gradientów, które mają powtarzać się tylko w poziomie (np. tło dla nagłówka).
• repeat-y: Do tworzenia pionowych wzorów lub linii (np. tło dla paska bocznego).
• repeat: Idealne dla małych, bezszwowych tekstur (seamless textures), które mają wypełnić całe tło.
• space / round: Mniej popularne, ale mogą być użyteczne do tworzenia specyficznych wzorów z ikon lub małych grafik, zapewniając równomierne rozmieszczenie bez obcinania lub z inteligentnym skalowaniem.