Vlastnosť background-repeat

Vlastnosť background-repeat určuje, ako sa má opakovať obrázok na pozadí elementu. Predvolene sa obrázok opakuje po osi X aj po osi Y, čím pokrýva celú dostupnú oblasť.

Syntax

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

Hodnoty

Hodnota	Popis
`no-repeat`	Obrázok sa nebude opakovať vôbec.
`repeat-x`	Obrázok sa bude opakovať po osi X.
`repeat-y`	Obrázok sa bude opakovať po osi Y.
`repeat`	Obrázok sa bude opakovať po osi X a po osi Y.
`space`	Obrázok sa zopakuje toľkokrát, aby úplne vyplnil oblasť, ak sa to nepodarí, medzi obrázkami sa pridáva prázdny priestor.
`round`	Obrázok sa zopakuje tak, aby sa do oblasti zmestilo celé číslo obrázkov, ak sa to nepodarí, obrázky na pozadí sa škálujú.

Predvolená hodnota: repeat - pokrýva vzorom celú obrazovku.

Príklad

Predvolene obrázok na pozadí vykladá celý element:

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

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

Результат:

Príklad

Nastavme, aby sa obrázok 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;
}

Результат:

Príklad

A teraz nech sa obrázok opakuje po 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;
}

Результат:

Príklad

A teraz po 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;
}

Результат:

Príklad

Obrázky opakujúce sa po osiach je možné pozicovať pomocou 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;
}

Результат:

Príklad

Pozrime sa, ako 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;
}

Результат:

Príklad

Pozrime sa, ako 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;
}

Результат:

Pozrite tiež

vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie