Свойство 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.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 |
Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Поддержка браузеров
Update compatibility data on GitHub
Компьютеры | Мобильные | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-repeat | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 3.5 | Safari Полная поддержка 1 | WebView Android Полная поддержка 37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
Multiple backgrounds | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.6 | IE Полная поддержка 9 | Opera Полная поддержка 10.5 | Safari Полная поддержка 1.3 | WebView Android Полная поддержка 37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 11 | Safari iOS Полная поддержка 1 | Samsung Internet Android ? |
round and space keywords | Chrome Полная поддержка 30 | Edge Полная поддержка 12 | Firefox Полная поддержка 49 | IE Полная поддержка 9 | Opera
Полная поддержка
17
| Safari Полная поддержка 7 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 30 | Firefox Android Полная поддержка 49 | Opera Android Полная поддержка 18 | Safari iOS Полная поддержка 8 | Samsung Internet Android Полная поддержка 2.0 |
Two-value syntax (different values for x & y directions) | Chrome Полная поддержка 3 | Edge Полная поддержка 12 | Firefox Полная поддержка 13 | IE Полная поддержка 9 | Opera Полная поддержка Да | Safari Полная поддержка 4.1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 14 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 4 | Samsung Internet Android Полная поддержка 1.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Совместимость неизвестна
- Совместимость неизвестна
Смотрите также