background-image
================

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

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

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

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

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

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

Синтаксис
---------


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

background-image: inherit;
```

### Значения

`none`

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

`<image>`

`<image>` (en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов (en-US).

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

background-image =   
  <bg-image># (en-US)    
  
<bg-image> =   
  <image>  | (en-US)  
  none       
  
<image> =   
  <url>       | (en-US)  
  <gradient> (en-US)    
  
<url> =   
  <url()>  | (en-US)  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* (en-US) )    
  
```

Примеры
-------

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

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

#### 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("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

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