СSS Свойство background-image
Пример
Повторять фоновое изображение только по вертикали:
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
Попробуйте сами »
Определение и Использование
Свойства background-repeat устанавливает, если/как фоновое изображение будет повторяться.
По индексу, элемент background-image повторяется как по вертикали, так и по горизонтали.
Совет: Фоновое изображение размещается в соответствии с свойством background-position. Если не задано значение background-position, изображение всегда размещается в верхнем левом углу элемента.
| Значение по умолчанию: | repeat |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | 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;
}
Попробуйте сами »
Пример
Использование background-repeat: space и background-repeat: round:
#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 справочник: Свойство backgroundRepeat
