Свойство background-image
Синтаксис
background-image: <uri> | none | inherit;
Описание
Свойство background-image (от англ. "background image" ‒ «фоновое изображение») устанавливает фоновое изображение элемента.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | Н/Д; |
| Медиа: | визуальные. |
Примечание
При установке фонового изображения, следует также указывать цвет фона, который будет использован в случае, если изображение недоступно. В случае же, когда изображение доступно, оно отображается поверх цвета фона. (Таким образом, цвет будет виден в прозрачных частях изображения).
Условия использования
Начиная с CSS3 (через запятую) можно указать сразу несколько фоновых изображений. При этом нижние фоновые изображения будут видны через прозрачные области верхних фоновых изображений.
JavaScript
[объект]
Поддержка браузерами
Спецификация
Значения
- none
- Указывает на отсутствие фонового изображения.
- url("<URI-адрес>")
- Указывает строку URI-адреса изображения внутри «
url(...)». При этом строка URI-адреса выделяется символами «"» ДВОЙНОЙ КАВЫЧКИ [U+0022].background-image: url("myImage.png"); - inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «none».
Пример использования
<html>
<head>
<meta charset="utf-8">
<title>Свойство background-image</title>
<style type="text/css">
body {
background-image: url("/examples/images/fig-red.png"), url("/examples/images/fig-green.png"), url("/examples/images/fig-blue.png"); /* синтаксис CSS3 */
}
</style>
</head>
<body>
<h1>Фоновое изображение</h1>
<p>Документ с несколькими фоновыми изображениями.</p>
</body>
</html>