background-image

Общие сведения

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

В большинстве случаев, когда используется несколько фоновых изображений, чтобы при наложении было видно все изображения у большинства будет прозрачный фон.

При настройке фона, автор также должен указать цвет фона (background-color), который будет отображаться когда изображение недоступно. Когда изображение доступно, оно будет отображаться поверх цвета фона. Любые границы элемента (border) будут отображаться поверх фона. В итоге: цвет фона находится в самом низу, поверх него находится фоновое изображение и границы элемента находятся поверх всего вышеперечисленного.

То как изображения будут отображаться относительно блока и его границ определяется CSS свойствами background-clip и background-origin.

Каждое изображение создаёт «слой» внутри элемента. Даже значение none создаёт слой; он считается слоем, но ничего не рисует на этом слое.

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

Синтаксис свойства

• Синтаксис:

  background-image: <image> | none

• Значение по умолчанию: none
• Применяется: ко всем элементам
• Наследуется: нет
• Анимируется: нет

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

• <image> - изображение, которое будет установлено в качестве фона. Можно указать несколько изображений разделённых запятыми. Используется тип данных <image>.
• none -  Не устанавливает фоновое изображение. Если фоновое изображение было установлено ранее, то оно будет удалено.

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

Пример

Ниже показан пример использования свойства background-image: