background-image

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

Границы border элемента затем рисуются поверх них, и background-color рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами background-clip и background-origin.

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

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

Начальное значениеnone
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Обработка значениякак указано, но с абсолютными значениями url
Animation typediscrete

Синтаксис

css
background-image: none;
background-image: url(http://www.example.com/bck.png);

background-image: inherit;

Значения

none

Это ключевое слово обозначает отсутствие изображений.

обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов.

Официальный синтаксис

background-image = 
  #  

 = 
    |
  none     

 = 
         |
    

 = 
    |
    

 = 
  url(  * )  |
                        

 = 
  src(  * )

Примеры

Несколько фонов и прозрачность

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

HTML содержимое

html

  
This paragraph is full of cats
and stars.

  
This paragraph is not.

  
Here are more cats for you.
Look at them!

  
And no more.

CSS содержимое

css
pre,
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-color: transparent;
}

div {
  background-image: url("mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-color: transparent;
}

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3
# background-image

Совместимость с браузерами

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