Изображение на фон css: background-image | htmlbook.ru

image — свойство css :: руководство cssdot.ru

Свойство 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. На данный момент свойство поддерживается во всех основных браузерах.

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

• Спецификация стандарта CSS 2.