background-repeat
Повторяется ли фоновая картинка, чтобы заполнить блок.
Синтаксис
background-repeat: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| repeat | keyword | Плиткой в обе стороны (по умолчанию). |
| no-repeat | keyword | Один раз. |
| repeat-x | repeat-y | keyword | Только по горизонтали или только по вертикали. |
Примеры
Горошек во все стороны и в один ряд:
<style>
.tiles {
height: 100px;
background-image: radial-gradient(circle, tomato 30%, transparent 32%);
background-size: 25px 25px;
}
</style>
<div class="tiles" style="background-repeat: repeat;"></div>
<p></p>
<div class="tiles" style="background-repeat: repeat-x;"></div>Примечания
Фотографии обычно нужен no-repeat: иначе в блоке больше картинки она повторится у краёв.
См. также
- background-image — Одна или несколько фоновых картинок: файлы или градиенты.
- background-size — Размер фоновой картинки.
Вопросы и ответы по теме
В учебнике
- Фон и рамки — Фоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.