Proprietatea background-repeat

Proprietatea background-repeat specifică modul în care se repetă imaginea de fundal a unui element. În mod implicit, imaginea se repetă atât pe axa X, cât și pe axa Y, acoperind astfel întreaga zonă disponibilă.

Sintaxă

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

Valori

Valoare	Descriere
`no-repeat`	Imaginea nu se va repeta deloc.
`repeat-x`	Imaginea se va repeta pe axa X.
`repeat-y`	Imaginea se va repeta pe axa Y.
`repeat`	Imaginea se va repeta atât pe axa X cât și pe axa Y.
`space`	Imaginea se va repeta de suficiente ori pentru a umple complet zona, dacă acest lucru nu este posibil, se adaugă spațiu gol între imagini.
`round`	Imaginea se va repeta astfel încât în zonă să încapă un număr întreg de imagini, dacă acest lucru nu este posibil, atunci imaginile de fundal sunt scalate.

Valoarea implicită: repeat - acoperă întregul ecran cu modelul.

Exemplu

În mod implicit, imaginea de fundal va acoperi întregul element:

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

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

Результат:

Exemplu

Să facem ca imaginea să nu se repete:

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

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

Результат:

Exemplu

Și acum să facem ca imaginea să se repete pe axa 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;
}

Результат:

Exemplu

Și acum pe axa 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;
}

Результат:

Exemplu

Imaginile care se repetă pe axe pot fi poziționate cu ajutorul proprietății 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;
}

Результат:

Exemplu

Să vedem cum funcționează valoarea space:

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

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

Результат:

Exemplu

Să vedem cum funcționează valoarea round:

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

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

Результат:

Vedeți și

proprietatea background,
care este o proprietate scurtă pentru fundal