Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу admin@tuhub.ru.

background-image

CSS background-image

Свойство background-image - устанавливает фоновое изображения для элемента. Оно принимает изображение или даже несколько изображений разделённых запятыми.

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

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

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

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

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

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

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

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

  • Синтаксис:
    background-image: <image> | none
  • Значение по умолчанию: none
  • Применяется: ко всем элементам
  • Наследуется: нет
  • Анимируется: нет

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

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

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

CSS3 Background-image options

IE
9
0.13%
10
0.1%
11
2.71%
Edge
15
0.08%
16
1.28%
17
0.36%
18
0%
Firefox
58
0.07%
59
1.98%
60
1.64%
61
0.07%
62
0%
Chrome
64
0.34%
65
1.92%
66
23.09%
67
0.19%
68
0.04%
Safari
10.1
0.27%
11
0.39%
11.1
1.3%
12
0%
TP
0%
iOS Safari
10.3
0.72%
11.0-11.2
2.13%
11.3
5.99%
Chrome for Android
66
30.44%

Пример

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