Свойство CSS background-image

Поддержка браузерами

Браузеры для ПК
Internet Explorer Chrome Opera Safari Firefox Edge
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 12+
Браузеры для планшетов и мобильных устройств
Android webview Chrome для Android Edge Mobile Firefox для Android Opera для Android iOS Safari Samsung Internet
Да Да Да Да Да Да Да

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется К блочным элементам
Аналог HTML Нет
Реализация в javascript
document.getElementById('idElement').style.backgroundImage = 'url(img.png)';
в данном случае элементу с id='idElement' будет добавлен стиль
background-image:url(img.png);
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background-image:url(img.png);">...</div>
Реализация в jQuery
$('#idElement').css('background-image','url(img.png)');
в данном случае элементу с id='idElement' будет добавлен стиль
background-image:url(img.png);
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background-image:url(img.png);">...</div>

Поддерживающие версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает изображение в качестве фона элемента. В версии CSS3 допустимо указание нескольких фоновых изображений в качестве параметра через запятую создавая слои изображений фона, при этом порядок имеет существенное значение, первое изображение будет верхним солом, второе находиться под первым и т.д.
В случае если элементу в качестве параметра фона будут заданы цвет и изображение, то до тех пор, пока изображение не загрузиться полностью будет отображаться цвет фона.
Если не заданы дополнительные параметры, то изображение размещается пропорционально своим размерам из верхнего левого угла элемента. В случае если размер элемента меньше размера фонового изображения, то все части фонового изображения, выходящие за рамки элемента, обрезаются браузером. Так же если размер фонового изображения меньше размера самого элемента, то фоновое изображение будет повторяется по вертикали и горизонтали начиная с левого верхнего угла.

Синтаксис

CSS1 - CSS2.1background-image: url(путь к файлу) | none | inherit;

CSS3background-image: url(путь к файлу) | none [, url(путь к файлу) | none]*;

Например:

... background-image:url('img.png'); или background-image:url('img1.png'),url('img2.png'),url('img3.png'); ...

Значения

url(путь к файлу)

В качестве параметра можно указывать путь к изображению или его код base64

inherit Наследует значение родителя.
none

Отменяет отображение фонового изображения.

Пример

background-image: url("/img/fon/bg1.jpg");
background-image: url('/img/fon/bg2.png');
background-image: url(/img/fon/bg1.jpg), url(/img/fon/bg2.png);
background-image: url(/img/fon/bg2.png), url(/img/fon/bg1.jpg);

Результат

В этом блоке показан пример использования свойства background-image: url("/img/fon/bg1.jpg");.