Własność CSS background-repeat

Własność CSS background-repeat określa sposób powielana obrazu lub obrazów w tle elementu albo wyłącza jego lub ich powielanie.

Wartości i składnia

Własność background-repeat obsługuje dwa rodzaje składni: z jednym słowem kluczowym i z dwoma słowami kluczowymi. Są one sobie równoważne i składnia z jednym słowem kluczowym jest jedynie skróconą formą zapisu składni z dwoma słowami kluczowymi.

Składnia podwójna

W składni podwójnej dostępne są cztery słowa kluczowe: no-repeat, repeat, round i space. Pierwsze z nich określa zachowanie obrazu tła w poziomie, a drugie – w pionie. Słów tych można używać w dowolnych kombinacjach i należy je rozdzielić spacją.

no-repeat

repeat

Ta wartość powoduje, że obraz jest powielany w danym kierunku tyle razy, ile trzeba, aby zakryć cały dostępny obszar tła. W przypadku użycia tej wartości ostatni egzemplarz powielonego obrazu może zostać obcięty, jeśli nie pasuje równo do rozmiaru tła elementu. Spójrz na poniższą przykładową regułę CSS:

div {
  width: 400px;
  height: 250px;
  background-image: url("puzzle.png");
  border: 3px solid black;
  background-repeat: repeat repeat;
}

Ta reguła ustawia szerokość elementu div na 400 pikseli i wysokość na 250 pikseli. W jego tle wstawia obraz o nazwie puzzle.png, który ma wymiary 150 × 150 pikseli i jest pokazany poniżej:

Dodatkowo powyższa reguła definiuje cienkie obramowanie, aby ułatwić dostrzeżenie efektu wstawienia obrazu w tle, oraz nadaje własności background-repeat wartość repeat repeat, aby zapewnić, że obraz ten zostanie powielony zarówno w poziomie, jak i w pionie. Efekt jej użycia jest pokazany poniżej:

Jak widać, obraz w tle został powielony w obu kierunkach, dzięki czemu wypełnił całą powierzchnię tła elementu div. Ostatnie egzemplarze powielonego obrazu (przy prawej i dolnej krawędzi) zostały obcięte, ponieważ nie zmieściły się w całości w wyznaczonym obszarze.

round

W przypadku użycia tej wartości obraz jest powielany w danym kierunku tyle razy, ile trzeba, aby zakryć cały dostępny obszar tła. Jeśli ostatni egzemplarz obrazu nie mieści się w całości w tle elementu, obraz ten zostaje odpowiednio przeskalowany, aby dało się go równo dopasować.

Żeby zilustrować działanie tej wartości, posłużymy się poprzednim przykładem, tylko zamienimy w nim deklarację background-repeat: repeat repeat; na background-repeat: round round;:

div {
  width: 400px;
  height: 250px;
  background-image: url("puzzle.png");
  border: 3px solid black;
  background-repeat: round round;
}

Efekt:

Teraz, tak jak poprzednio, obraz tła zapełnia cały dostępny obszar, ale jego wymiary zostały zmienione tak, aby nie dochodziło do jego obcięcia.

space

Ta wartość powoduje, że obraz jest powielany w danym kierunku tyle razy, ile trzeba, aby zakryć cały dostępny obszar tła. Jeśli ostatni egzemplarz obrazu nie mieści się w całości w tle elementu, przeglądarka odpowiednio zmienia odstępy między nimi, aby żaden nie był obcięty.

Ponownie posłużymy się poprzednim przykładem, zmieniając wartość własności background-repeat na space space:

div {
  width: 400px;
  height: 250px;
  background-image: url("puzzle.png");
  border: 3px solid black;
  background-repeat: space space;
}

Efekt tej zmiany jest taki:

Składnia pojedyncza

Pojedyncze słowa kluczowe są skróconą formą zapisu notacji podwójnej. Poniższa tabela zawiera zestawienie słów kluczowych notacji pojedynczej i ich odpowiedników w notacji podwójnej.

Zastosowanie

Własność CSS background-repeat ma zastosowanie do wszystkich elementów HTML.

Podsumowanie