background-image
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Примечание: браузер Internet Explorer 8 и более ранние версии не поддерживает несколько фоновых картинок для одного элемента.
Описание
CSS свойство background-image устанавливает одну или несколько фоновых картинок для элемента. Фоновая картинка будет самым нижним слоем в элементе, то есть весь контент и рамка будут отображаться поверх изображения.
По умолчанию фоновая картинка располагается в верхнем левом углу и повторяется по вертикали и горизонтали, CSS свойство background-repeat позволяет переопределить заданный повтор изображения.
Для смены области расположения фоновой картинки используется CSS свойство background-origin, для контроля отношения фона к рамкам элемента используется свойство background-clip.
Если для элемента указывается несколько фоновых изображений, то порядок их указания имеет значение. Первое добавляемое изображение будет отображаться перед всеми остальными, последнее — за всеми остальными фоновыми изображениями, например, следующий код:
background-image: url('1.jpg'), url('2.jpg'), url('3.jpg');
добавит изображения в следующем порядке:
Если указанная фоновая картинка не может быть отображена (например не удается загрузить файл или не правильно прописан путь), то браузеры будут реагировать так, как если бы в качестве значения свойства было указано ключевое слово none.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.backgroundImage="url(stars.gif)" |
Синтаксис
background-image: url|none|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| url('URL') | Путь к изображению. Путь можно указывать в кавычках (двойных или одинарных), или без них. Допускается устанавливать более одного фонового изображения для элемента, в этом случае пути к изображениям указываются через запятую (url('URL'), url('URL'), url('URL'), ...). |
| linear-gradient() | Задаёт параметры для линейного градиента. |
| radial-gradient() | Задаёт параметры для радиального градиента |
| none | Указывает, что фонового изображения нет. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style type="text/css">
body { background-image: url('1.gif'); }
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Результат данного примера в окне браузера:
