Својство 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,
које представља скраћено својство за позадину