/css/background-image:> Фоновое изображение_
Свойство background-image
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
background-image: <uri> | none | inherit;
Описание
Свойство background-image
(от англ. "background image" ‒ «фоновое изображение») устанавливает фоновое изображение элемента.
Применяется: | ко всем элементам; |
---|---|
Наследование: | отсутствует; |
Проценты: | Н/Д; |
Медиа: | визуальные. |
Примечание
При установке фонового изображения, следует также указывать цвет фона, который будет использован в случае, если изображение недоступно. В случае же, когда изображение доступно, оно отображается поверх цвета фона. (Таким образом, цвет будет виден в прозрачных частях изображения).
Условия использования
Начиная с CSS3 (через запятую) можно указать сразу несколько фоновых изображений. При этом нижние фоновые изображения будут видны через прозрачные области верхних фоновых изображений.
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Значения
- none
- Указывает на отсутствие фонового изображения.
- url("<URI-адрес>")
- Указывает строку URI-адреса изображения внутри «
url(...)
». При этом строка URI-адреса выделяется символами «"
» ДВОЙНОЙ КАВЫЧКИ [U+0022].background-image: url("myImage.png");
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «none
».
Пример использования
Листинг кода
<!DOCTYPE html>
<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>
<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>
Свойство background-image