Style background image: background-origin — CSS: Cascading Style Sheets

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

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

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

Кроме того, по соображениям совместимости и обеспечения общедоступности информации для пользователей с ограниченными возможностями, не следую использовать фоновые изображения в качестве единственного метода представления важных данных, потому что изображения отсутствуют в

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

[: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. 1
• Спецификация стандарта CSS 3
• Описание на Mozilla Developer Network
• Описание на Microsoft Developer Network
• Описание на Safari Developer Library

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

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

Синтаксис:

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

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

none

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

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

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

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

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

Internet Explorer

Firefox

Chrome

Safari

Opera

Стиль HTML DOM backgroundImage Свойство

❮ Назад ❮ Справочник по объектам стиля Далее ❯

Пример

Установить фоновое изображение для документа:

document.body.style.backgroundImage = «url(‘img_tree.png’)»;

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство backgroundImage устанавливает или возвращает фоновое изображение элемента.

Совет: В дополнение к фоновому изображению вы также должны указать фоновый цвет. Фоновый цвет будет использоваться, если изображение недоступно.

См. также:

Стили HTML: Свойство фона

Учебник CSS: Фоны CSS

Учебник CSS3: Фоны CSS3

Справочник по CSS: Свойство background-image

Синтаксис

объект .style.backgroundImage

Установите свойство backgroundImage:

объект .style.backgroundImage = «url(‘ URL ‘)|none|initial|inherit»

Значения свойств

Значение	Описание
URL( ‘URL’ )	Расположение файла образа
нет	Нет фонового изображения. Это по умолчанию
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о наследовать

Технические детали

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

backgroundImage — это функция CSS1 (1996).

Полностью поддерживается во всех браузерах:

Дополнительные примеры

Пример

Установка фонового изображения для определенного элемента