Vlastnost background-repeat

Vlastnost background-repeat určuje jakým způsobem opakovat obrázek na pozadí prvku. Ve výchozím nastavení se obrázek opakuje podél osy X i podél osy Y, čímž pokrývá celou dostupnou oblast.

Syntaxe

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

Hodnoty

Hodnota	Popis
`no-repeat`	Obrázek se nebude opakovat vůbec.
`repeat-x`	Obrázek se bude opakovat podél osy X.
`repeat-y`	Obrázek se bude opakovat podél osy Y.
`repeat`	Obrázek se bude opakovat podél osy X a podél osy Y.
`space`	Obrázek se zopakuje tolikrát, aby zcela vyplnil oblast, pokud se to nepodaří, přidá se mezi obrázky prázdný prostor.
`round`	Obrázek se zopakuje tak, aby se do oblasti vešlo celé číslo obrázků, pokud se to nepodaří, obrázky na pozadí se škálují.

Výchozí hodnota: repeat - pokrývá celou oblast vzorem.

Příklad

Ve výchozím nastavení obrázek na pozadí vyplní celý prvek:

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

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

Результат:

Příklad

Nastavme, aby se obrázek neopakoval:

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

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

Результат:

Příklad

Nyní nastavme opakování obrázku podél osy 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;
}

Результат:

Příklad

A nyní podél osy 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;
}

Результат:

Příklad

Obrázky opakující se podél os lze pozicovat pomocí vlastnosti 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;
}

Результат:

Příklad

Podívejme se, jak funguje hodnota space:

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

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

Результат:

Příklad

Podívejme se, jak funguje hodnota round:

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

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

Результат:

Viz také

vlastnost background,
představující zkratkovou vlastnost pro pozadí