Właściwość background-repeat

Właściwość background-repeat określa w jaki sposób powtarzać obrazek tła elementu. Domyślnie obrazek powtarza się zarówno wzdłuż osi X, jak i osi Y, tym samym pokrywając sobie cały dostępny obszar.

Składnia

cssselektor {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Wartości

Wartość	Opis
`no-repeat`	Obrazek nie będzie powtarzany w ogóle.
`repeat-x`	Obrazek będzie powtarzany wzdłuż osi X.
`repeat-y`	Obrazek będzie powtarzany wzdłuż osi Y.
`repeat`	Obrazek będzie powtarzany wzdłuż osi X i wzdłuż osi Y.
`space`	Obrazek powtórzy się tyle razy, aby całkowicie wypełnić obszar, jeśli to się nie udaje, między obrazkami dodawana jest pusta przestrzeń.
`round`	Obrazek powtórzy się tak, aby w obszarze zmieściła się całkowita liczba rysunków, jeśli nie da się tego zrobić, to obrazki tła są skalowane.

Wartość domyślna: repeat - pokrywa wzorem cały ekran.

Przykład

Domyślnie obrazek tła wyłoży sobą cały element:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Przykład

Zróbmy tak, aby obrazek się nie powtarzał:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Przykład

A teraz niech obrazek powtarza się wzdłuż osi X:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-x;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Przykład

A teraz wzdłuż osi Y:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Przykład

Powtarzające się wzdłuż osi obrazki można pozycjonować za pomocą właściwości background-position:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Przykład

Sprawdźmy, jak działa wartość space:

html<div id="elem"></div>

css#elem {
  background-repeat: space;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Przykład

Sprawdźmy, jak działa wartość round:

html<div id="elem"></div>

css#elem {
  background-repeat: round;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Zobacz też

właściwość background,
reprezentująca właściwość-skrót dla tła