Lastnost background-repeat

Lastnost background-repeat določa, kako ponavljati sliko ozadja elementa. Privzeto se slika ponavlja tako po osi X kot po osi Y, s čimer pokrije vso razpoložljivo površino.

Sintaksa

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

Vrednosti

Vrednost	Opis
`no-repeat`	Slika se ne bo ponavljala.
`repeat-x`	Slika se bo ponavljala po osi X.
`repeat-y`	Slika se bo ponavljala po osi Y.
`repeat`	Slika se bo ponavljala po osi X in po osi Y.
`space`	Slika se bo ponovila tolikokrat, da bo popolnoma zapolnila površino, če to ni mogoče, se med slikami doda prazen prostor.
`round`	Slika se bo ponovila tako, da se bo v površino postavilo celo število slik, če tega ni mogoče narediti, se slike ozadja skalirajo.

Privzeta vrednost: repeat - prekrije celotno površino z vzorcem.

Primer

Privzeto bo slika ozadja tlakovala celoten element:

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

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

Результат:

Primer

Poskrbimo, da se slika ne ponavlja:

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

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

Результат:

Primer

Zdaj naj se slika ponavlja 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;
}

Результат:

Primer

In zdaj 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;
}

Результат:

Primer

Ponavljajoče se slike po oseh je mogoče pozicionirati z lastnostjo 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;
}

Результат:

Primer

Poglejmo, kako deluje vrednost space:

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

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

Результат:

Primer

Poglejmo, kako deluje vrednost round:

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

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

Результат:

Glejte tudi

lastnost background,
ki je okrajšava za lastnosti ozadja