CSS background-repeat Свойство
Пример
Повторить фоновое изображение только вертикально:
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
Подробнее примеры ниже.
Определение и использование
Свойство background-repeat устанавливает, будет ли повторено фоновое изображение.
По умолчанию фоновое изображение повторяется как по вертикали, так и по горизонтали.
Совет: Фоновое изображение размещается в соответствии со свойством Фоновая позиция. Если не указана фоновая позиция, изображение всегда помещается в верхний левый угол элемента.
| Значение по умолчанию: | repeat |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS1 |
| Синтаксис JavaScript: | object.style.backgroundRepeat="repeat-x" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: IE8 и более ранние версии не поддерживают несколько фоновых изображений на одном элементе.
Синтаксис CSS
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| repeat | Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не умещается. Это значение по умолчанию | |
| repeat-x | Фоновое изображение повторяется только по горизонтали | |
| repeat-y | Фоновое изображение повторяется только вертикально | |
| no-repeat | Фоновое изображение не повторяется. Изображение будет показано только один раз | |
| space | Фоновое изображение повторяется как можно больше без обрезки. Первое и Последнее изображения закреплены на обеих сторонах элемента, и пробел распределяется равномерно между изображениями | |
| round | Фон-изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без зазоров) | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Повторите фоновое изображение как по вертикали, так и по горизонтали (по умолчанию):
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;
}
Пример
Использование фона-повторить: пространство и фон-повторить: круглые:
#example2 {
border: 2px solid black;
padding: 25px;
background: url("w3css.gif");
background-repeat: space;
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
background-repeat: round;
}
Похожие страницы
CSS Справочник: CSS Background
CSS Справка: background-position Свойство
HHTML DOM reference: backgroundRepeat Свойство