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 ⁨июль 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 type	discrete

Синтаксис

css

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

background-image: inherit;

Значения

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

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

background-image = 
  <bg-image>#  

<bg-image> = 
  <image>  |
  none     

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Примеры

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

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

HTML содержимое

html

<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>

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

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

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

CSS спрайты изображений
<img>
Статьи, связанные с изображениями:: <image>, linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient, element().

Help improve MDN

Learn how to contribute

This page was last modified on ⁨21 янв. 2025 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content