Свойство background-repeat задает каким образом повторять фоновую картинку элемента. По умолчанию картинка повторяется и по оси X, и по оси Y, таким образом покрывая собой всю доступную область.

Данное свойство входит в свойство-сокращение background.

См. все свойства для фона: background-attachment, background-color, background-image, background-position, background-repeat, background-size, background-origin, background-clip, background.

См. также тег img, с помощью которого можно сделать картинку в HTML коде.

Синтаксис

CSS 2.1

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

CSS 3

В CSS3 можно задавать несколько картинок фона одновременно. Если для элемента задано несколько фонов, то способ их повторения background-repeat перечисляется через запятую.

селектор {
	body{
	background-image: url('путь к картинке1'), url('путь к картинке2');
	background-position: top left, 100% 30%;
	background-repeat: repeat-x, no-repeat;
}
}

Значения

Значение Описание
no-repeat Картинка не будет повторяться вообще.
repeat-x Картинка будет повторяться по оси X.
repeat-y Картинка будет повторяться по оси Y.
repeat Картинка будет повторяться по оси X и по оси Y.
space (CSS3) Изображение повторяется столько раз, чтобы полностью заполнить область, если это не удается, между картинками добавляется пустое пространство.
round (CSS3) Изображение повторяется так, чтобы в области поместилось целое число рисунков, если это не удается сделать, то фоновые рисунки масштабируются.
inherit Наследует значение родителя.

Значение по умолчанию: repeat - покрывает узором весь экран.

Примеры

Пример . Значение repeat-x

В данном примере для body установлена фоновая картинка-узор. Свойство background-repeat установлено в repeat-x - картинка будет повторяться по оси X. По умолчанию фон позиционируется вверху, чтобы изменить это поведение - следует воспользоваться свойством background-position:

body {
	background-image: url('bg.jpg');
	background-attachment: scroll;
	background-repeat: repeat-x;
}
#elem {
	margin: 0px auto;
	width: 500px;
	text-align: justify;
	font-weight: bold;
}

Посмотреть пример.

Пример . Значение repeat-y

В данном примере для body установлена фоновая картинка-узор. Свойство background-repeat установлено в repeat-y - картинка будет повторяться по оси Y. По умолчанию фон позиционируется вверху слева, чтобы изменить это поведение - следует воспользоваться свойством background-position:

body {
	background-image: url('bg.jpg');
	background-attachment: scroll;
	background-repeat: repeat-y;
}

Посмотреть пример.

Пример . Значение repeat-y + background-position

В данном примере для body установлена фоновая картинка-узор. Свойство background-repeat установлено в repeat-y - картинка будет повторяться по оси Y. Свойство background-position установлено как '50px 0px' - это значит, что картинка не будет прижата к левому краю, а отойдет от него на 50px:

body {
	background-image: url('bg.jpg');
	background-attachment: scroll;
	background-repeat: repeat-y;
	background-position: 50px 0px;
}

Посмотреть пример.

Пример . Значение no-repeat

В данном примере для body установлена фоновая картинка-узор. Свойство background-repeat установлено в no-repeat - картинка не будет повторяться вообще. По умолчанию фон позиционируется в верхнем левом углу, чтобы изменить это поведение - следует воспользоваться свойством background-position:

body {
	background-image: url('bg.jpg');
	background-attachment: scroll;
	background-repeat: no-repeat;
}

Посмотреть пример.

Пример . Два фона сразу

В данном примере для body установлено два фона: один будет полосой справа, другой - полосой слева:

body {
	background-image: url('bg1.jpg'), url('bg2.jpg');
	background-repeat: repeat-y, repeat-y;
	background-position: top left, top right;
}

Посмотреть пример.