background-image
Обновлено: 05.12.2022
background-image
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.
Краткая информация
| Значение по умолчанию | none |
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
background-image: url(<адрес>) | none[, url(<адрес>) | none]*
Значения
| url | В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. |
| none | Отменяет фоновое изображение для элемента. |
Пример
Объектная модель
Объект.style.backgroundImage
Примечание
Internet Explorer до версии 7 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout. Если у элемента нет hasLayout, свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные (dashed или dotted), а не сплошные.
Если для элемента значение overflow установлено как scroll или auto, в Internet Explorer 8 будет вертикальная задержка в один пиксель при прокрутке фона.
Если фон задаётся для строки таблицы (элемент <tr>), то Chrome и Safari отображают его не так, как предписывает спецификация, а именно для каждой ячейки отдельно. В то время как браузер должен показывать цельный фон для всего ряда. В примере ниже приведён код демонстрирующий ошибку.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон для TR</title>
<style>
table {width: 100%; border-spacing: 0; }
tr { background: #f6d654 url(images/orangebg.png) repeat-y; }
</style>
</head>
<body>
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</body>
</html>