background-repeat - CSS

Свойство background-repeat устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round) или равномерно растянуть от конца к концу (используя space).

Синтаксис

/*Ключевые значения*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/*Два значения: горизонтальное | вертикальное*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Глобальные значения */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Значения

<repeat-style>

Следующие однозначные имеют двухзначные эквиваленты:

`repeat-x`	тоже самое, что и `repeat no-repeat`
`repeat-y`	тоже самое, что и `no-repeat repeat`
`repeat`	тоже самое, что и `repeat repeat`
`space`	тоже самое, что и `space space`
`round`	тоже самое, что и `round round`
`no-repeat`	тоже самое, что и `no-repeat no-repeat`

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

`repeat`	Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
`space`	Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства `background-position` игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение `space`.
`round`	Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
`no-repeat`	Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством `background-position`.

Примеры

HTML

<ol>
    <li>no-repeat
        <div class="one">&nbsp;</div>
    </li>
    <li>repeat
        <div class="two">&nbsp;</div>
    </li>
    <li>repeat-x
        <div class="three">&nbsp;</div>
    </li>
    <li>repeat-y
        <div class="four">&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div class="five">&nbsp;</div>
    </li>
</ol>

CSS

/* Совместно для всех DIVS в примере */
li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 144px;
    height: 84px;
}

/* повторение фона CSS */
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

/* Несколько изображений */
.five {
    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

Результат

В этом примере каждому элементу списка соответствует другое значение background-repeat.

Спецификация

Спецификация	Статус	Комментарий
CSS Backgrounds and Borders Module Level 3 Определение 'background-repeat' в этой спецификации.	Кандидат в рекомендации	Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов `space` и `round`, а также для фона на элементе на уровне строки путем точного определения области рисования фона.
CSS Level 2 (Revision 1) Определение 'background-repeat' в этой спецификации.	Рекомендация	Без существенных изменений
CSS Level 1 Определение 'background-repeat' в этой спецификации.	Рекомендация

Начальное значение	`repeat`
Применяется к	все элементы. Это также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Обработка значения	список, каждый элемент которого содержит 2 ключевых слова, по одному на размер
Animation type	discrete

Поддержка браузеров

BCD tables only load in the browser

Смотрите также

Использование нескольких CSS фонов