Својството background-repeat

Својството background-repeat одредува како да се повторува позадинската слика на елементот. Стандардно, сликата се повторува и по X-оската, и по Y-оската, со што ја покрива целата достапна област.

Синтакса

cssселектор {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Вредности

Вредност	Опис
`no-repeat`	Сликата воопшто нема да се повторува.
`repeat-x`	Сликата ќе се повторува по X-оската.
`repeat-y`	Сликата ќе се повторува по Y-оската.
`repeat`	Сликата ќе се повторува по X-оската и по Y-оската.
`space`	Сликата ќе се повтори онолку пати колку што е потребно за целосно да се пополни областа, доколку тоа не е можно, меѓу сликите се додава празен простор.
`round`	Сликата ќе се повтори така што во областа ќе собере цел број на слики, доколку тоа не е можно, тогаш позадинските слики се скалираат.

Стандардна вредност: repeat - ја покрива целата површина со шаблон.

Пример

Стандардно, позадинската слика ќе ја покрие целата површина на елементот:

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

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

Результат:

Пример

Да направиме сликата да не се повторува:

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

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

Результат:

Пример

А сега нека сликата се повторува по 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;
}

Результат:

Пример

А сега по 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;
}

Результат:

Пример

Сликите што се повторуваат по оските може да се позиционираат со помош на својството 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;
}

Результат:

Пример

Да видиме како работи вредноста space:

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

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

Результат:

Пример

Да видиме како работи вредноста round:

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

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

Результат:

Поврзано

својството background,
кое претставува кратенка за позадината