Svojstvo background-repeat

Svojstvo background-repeat zadaje način na koji se ponavlja pozadinska slika elementa. Podrazumevano, slika se ponavlja i po X osi, i po Y osi, na taj način pokrivajući celu dostupnu površinu.

Sintaksa

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

Vrednosti

Vrednost	Opis
`no-repeat`	Slika se neće ponavljati uopšte.
`repeat-x`	Slika će se ponavljati po X osi.
`repeat-y`	Slika će se ponavljati po Y osi.
`repeat`	Slika će se ponavljati po X osi i po Y osi.
`space`	Slika će se ponoviti onoliko puta koliko je potrebno da se u potpunosti popuni površina, ako to nije moguće, između slika se dodaje prazan prostor.
`round`	Slika će se ponoviti tako da se u površinu uklopi ceo broj crteža, ako to nije moguće, pozadinski crteži se skaliraju.

Podrazumevana vrednost: repeat - pokriva celu površinu šemom (uzorkom).

Primer

Podrazumevano, pozadinska slika će popločati ceo element:

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

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

Результат:

Primer

Hajde da postavimo 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

A sada neka se slika ponavlja po X osi:

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

A sada po Y osi:

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

Ponavljajuće slike po osama možemo pozicionirati pomoću svojstva 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

Pogledajmo kako radi 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

Pogledajmo kako radi 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;
}

Результат:

Pogledajte takođe

svojstvo background,
koje predstavlja skraćeno svojstvo za pozadinu