Свойство 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,
което е съкратено свойство за фона