СSS Свойство background-image
Пример
Установите фоновое изображение для элемента <body>:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
Попробуйте сами »
Пример
Установите фоновое изображение для элемента <body>:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
Попробуйте сами »
Определение и использование
Свойство background-image задает одно или несколько фоновых изображений для элемента.
По индексу фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали.
Совет: элемент background - это общий размер элемента, включая отступ и границу (но не поля).
Совет: Всегда установливать background-color если изображение недоступно.
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS1 + новые значения в CSS3 |
| JavaScript синтаксис: | object.style.backgroundImage="url(img_tree.gif)" Попробуйте сами |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: IE8 и более ранние версии не поддерживают несколько фоновых изображений.
CSS Синтаксис
background-image: url|none|initial|inherit;
Значение свойств
| Значение | Описание |
|---|---|
| url('URL') | URL-адрес изображения. Чтобы указать несколько изображений, разделите завитки запятой |
| none | Фоновое изображение не отображается. |
| linear-gradient() | Устанавливает линейный градиент в качестве фонового изображения. Определите по крайней мере два цвета (сверху вниз) |
| radial-gradient() | Устанавливает радиальный градиент в качестве фонового изображения. Определите по крайней мере два цвета (от центра к краям) |
| repeating-linear-gradient() | Повторяет линейный градиент |
| repeating-radial-gradient() | Повторяет радиальный градиент |
| initial | Задает этому свойству значение индекса. Прочитать о initial |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Устанавливает два фоновых изображения для элемента <body>. Пусть первое изображение появляется только один раз (без повтора), и пусть повторяется второе изображение:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
Попробуйте сами »
Пример
Устанавливает линейный градиент (два цвета) в качестве фонового изображения для элемента <div>:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow);
}
Попробуйте сами »
Пример
Устанавливает линейный градиент (три цвета) в качестве фонового изображения для элемента <div>:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow, green);
}
Попробуйте сами »
Пример
Функция repeating-linear-gradient() используется для повторения линейных градиентов:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Попробуйте сами »
Пример
Устанавливает радиальный градиент (два цвета) в качестве фонового изображения для элемента <div>:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow);
}
Попробуйте сами »
Пример
Устанавливает радиальный градиент (три цвета) в качестве фонового изображения для элемента <div>:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow, green);
}
Попробуйте сами »
Пример
Функция repeating-radial-gradient() используется для повторения радиальных градиентов:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Попробуйте сами »
Связанные страницы
CSS учебник: CSS Background, CSS Backgrounds (прогрессивный), CSS Gradients
HTML DOM справочник: Свойство backgroundImage
