Свойство background-image

Свойство background-image позволяет установить одно или несколько фоновых изображений для элемента, которые будут отображаться в границах области, охватываемой внешним краем рамок элемента, и заполненной фоновым цветом, если он задан с помощью свойства - (background-color).

Если в качестве фона используются несколько изображений, то более "близким" к пользователю считает первый слой, потом второй, и так далее - до конца списка, а слой залитый фоновым цветом лежит позади всех фоновых изображений. Поэтому рекомендуется, задавать фоновые изображения в паре с цветом фона, чтобы в случае, когда по каким-либо причинам изображения не отобразились, или не успели загрузиться - содержание элемента не сливалось с подложкой.

Кроме того, по соображениям совместимости и обеспечения общедоступности информации для пользователей с ограниченными возможностями, не следую использовать фоновые изображения в качестве единственного метода представления важных данных, потому что изображения отсутствуют в не графических средствах воспроизведения, и, к тому же, они могут быть отключены в высоко-контрастных режимах отображения. Более подробно с рекомендациями на данную тему можно ознакомится в спецификации Web Content Accessibility Guidelines (WCAG) 2.0.

В качестве изображения возможно использовать следующие значения:

[:inherit:]
значение свойства наследуется от родительского элемента
[:none:]
изображение отсутствует, отображается как пустой прозрачный слой
[:image:]
значение, типа "изображение", которое может быть задано как:
  • ссылка на графический файл - url(относительный или абсолютный путь к изображению)
  • встроенное изображение - url(data:[тип][;charset=[кодировка]][;base64],данные)
  • градиент - linear-gradient(), radial-gradient() и т.д.
  • функция image()
  • функция element()
  • функция image-rect()

Практически все современные браузеры поддерживают значения - inherit, none, url(), а так же функции для градиентов, но с префиксами -moz, -webkit, -o. Функция image() хотя и описана в последней версии спецификации ..., но на данный момент не поддерживается ни одним из браузеров. Функция element() определена в следующий версии спецификации CSS 4, и с префиксом реализована только в браузере Firefox. Функция image-rect() не содержится в спецификациях и поддерживается только браузером Firefox.

Если в списке изображений, встречается такое, которое не может быть отображено (не поддерживаемый графический формат), загружено (нет доступа к сетевому ресурсу), либо оно пустое, то оно все равно считается за отдельный пустой слой, аналогично ключевому слову 'none'.

Свойство background-image относится к спецификации CSS, применяется к всем элементам, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение none. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

Краткое описание

Фоновое изображение

Синтаксис:

CSS2 <image> | none | inherit

CSS3 [<image> | none [, <image> | none ]* | inherit

По умолчанию:

none

Наследование:

не наследуется

Объектная модель документа (DOM):

[элемент].style.background-image

Кроссбраузерная совместимость

Internet Explorer

5+

Firefox

2.0+

Chrome

1.0+

Safari

1.0+

Opera

8.5+