background-repeat

Обновлено: 31.05.2022

background-repeat

Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Краткая информация

Значение по умолчанию repeat
Наследуется Нет
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

background-repeat: <повторение> [ , <повторение> ]*
Здесь:

<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.

Значения

no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.
repeat Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.
repeat-x Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.
repeat-y Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.
space Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
round Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

Пример

Объектная модель

Объект.style.backgroundRepeat

Браузеры

background-repeat

Посмотреть совместимость на Can I use?

background-repeat