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

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

Синтакса

селектор {
	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 - ја покрива целата површина со шаблон.

Пример

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

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

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

Пример

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

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

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

Пример

А сега нека сликата се повторува по X-оската:

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

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

Пример

А сега по Y-оската:

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

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

Пример

Сликите што се повторуваат по оските може да се позиционираат со помош на својството background-position:

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

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

Пример

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

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

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

Пример

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

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

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

Поврзано

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