Свойство 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,
представляющее собой свойство-сокращение для фона