background-repeat
Повторите фоновое изображение только по вертикали:
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
Попробуйте сами »
Определение background-repeat
CSS свойство background-repeat определяет, будет ли повторяться фоновое изображение.
По умолчанию фоновое изображение повторяется как по вертикали, так и по горизонтали.
Совет: Фоновое изображение размещается в соответствии со свойством background-position. Если положение фона не указано, изображение всегда размещается в верхнем левом углу элемента.
| Значение по умолчанию: | repeat |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.backgroundRepeat="repeat-x" Попробуй |
Поддержка background-repeat
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Синтаксис background-repeat
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Значения background-repeat
| Значение | Описание | Демонстрация |
|---|---|---|
| repeat | Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не подходит. Это значение по умолчанию | Демо ❯ |
| repeat-x | Фоновое изображение повторяется только по горизонтали | Демо ❯ |
| repeat-y | Фоновое изображение повторяется только по вертикали | Демо ❯ |
| no-repeat | Фоновое изображение не повторяется. Изображение будет показано только один раз | Демо ❯ |
| space | Фоновое изображение повторяется настолько часто, насколько это возможно, без обрезки. Первое и последнее изображение прикрепляются с обеих сторон элемента, а пробелы равномерно распределяются между изображениями | Демо ❯ |
| round | Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пробелов) | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры background-repeat
Повторите фоновое изображение как по вертикали, так и по горизонтали (это значение по умолчанию):
body
{
background-image: url("paper.gif");
background-repeat: repeat;
}
Попробуйте сами »
Повторите фоновое изображение только по горизонтали:
body
{
background-image: url("paper.gif");
background-repeat: repeat-x;
}
Попробуйте сами »
Не повторяйте фоновое изображение. Изображение будет показано только один раз:
body
{
background-image: url("paper.gif");
background-repeat: no-repeat;
}
Попробуйте сами »
Использование background-repeat: space и background-repeat: round:
#example2 {
border: 2px solid black;
padding: 25px;
background: url("sw3css.gif");
background-repeat: space;
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url("sw3css.gif");
background-repeat: round;
}
Попробуйте сами »
Используйте различные свойства фона для создания изображения "hero":
.hero-image {
background-image: url("photographer.jpg"); /* Используемое
изображение */
background-color: #cccccc; /* Используется, если изображение
недоступно */
height: 500px; /* Вы должны установить указанную высоту */
background-position: center; /* Центрируйте изображение */
background-repeat: no-repeat; /* Не повторяйте изображение */
background-size: cover; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}
Попробуйте сами »
Страницы по теме background-repeat
CSS Учебник: CSS Background
CSS Справочник: background-position свойство
HTML DOM справочник: backgroundRepeat свойство