background-image

Обновлено: 18.09.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>

Браузеры

background-image

Посмотреть совместимость на Can I use?

background-image