background-repeat

Описание

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

background-repeat
Значения: repeat | no-repeat | repeat-x | repeat-y | inherit | round | space
Начальное значение: repeat
Область применения: все элементы
Наследование: нет
Поддержка браузерами: основные значения Internet Explorer 4+, Chrome 1+, Opera 3.5+, Safari 1+, Firefox 1+, Android +, iOS +
Поддержка браузерами: многослойные фоны Internet Explorer 9+, Chrome 1+, Opera 10.5+, Safari 1.3+, Firefox 3.6+, Android +, iOS +
Поддержка браузерами: значения space и round Internet Explorer 9+, Chrome -, Opera 10.5+, Safari -, Firefox —
Синтаксис JavaScript object.style.backgroundRepeat="repeat-x"
Примечание:

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

Синтаксис

background-repeat:  стиль повторения[, стиль повторения]*

где стиль повторения — одно из поддерживаемых значений.

Значения

Для свойства background-repeat можно использовать одно или два значения. В случае указания двух значений, первое значение задает режим повтора по горизонтали, второе — по вертикали.
Свойство background-repeat может принимать следующие значения:

no-repeat
Фоновое изображение, заданное свойством background-image не повторяется. Эквивалентно no-repeat no-repeat
repeat
Фоновое изображение повторяется по вертикали и горизонтали. Эквивалентно repeat repeat
repeat-x
Фоновое изображение повторяется по горизонтали. Эквивалентно repeat no-repeat
repeat-y
Фоновое изображение повторяется по вертикали. Эквивалентно no-repeat repeat
inherit
Наследуется значение родительского элемента
space
Фоновое изображение повторяется столько раз, чтобы заполнить все пространство без обрезки изображения. В случае необходимости добавляются отступы между изображениями. Эквивалентно space space
round
Фоновое изображение повторяется столько раз, чтобы заполнить все пространство без обрезки изображения. В случае необходимости изображения масштабируются. Эквивалентно round round
Значение inherit не поддерживает IE7 и более старые версии браузера.

Пример

body {
    background-image: url(img.jpg);
	background-repeat: repeat-x;
}
body {
    background-image: url(img.jpg);
	background-repeat: repeat-y;
}

Попробовать в DemoPlay

Комментирование запрещено.