background-repeat
Свойство 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"> </div>
</li>
<li>repeat
<div class="two"> </div>
</li>
<li>repeat-x
<div class="three"> </div>
</li>
<li>repeat-y
<div class="four"> </div>
</li>
<li>repeat-x, repeat-y (multiple images)
<div class="five"> </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.mozilla.org/static/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