background
==========

Сокращённое CSS свойство **`background`** устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.

Интерактивный пример
--------------------

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..

Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: `background-clip`, `background-color`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, и `background-attachment`.

Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.

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


```css
/\* Использование свойства <background-color> \*/
background: green;

/\* Использование свойств <bg-image> и <repeat-style> \*/
background: url("test.jpg") repeat-y;

/\* Использование <box> и <background-color> \*/
background: border-box red;

/\* Одно изображение, центрированное и масштабированное \*/
background: no-repeat center/80% url("../img/image.png");
```


**Примечание:** `background-color` можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

### Значения

Свойству можно указывать одно или более значений из данного списка в любом порядке:

`<attachment>`

Смотри `background-attachment`

`<box>`

Смотри `background-clip`

`<background-color>`

Смотри `background-color`

`<bg-image>`

Смотри `background-image`

`<position>`

Смотри `background-position`

`<repeat-style>`

Смотри `background-repeat`

`<bg-size>`

Смотри `background-size`. Это свойство должно быть указано после **<position>**, разделённого символом '/'.

### Формальный синтаксис
```

background =   
  <bg-layer># (en-US)? (en-US) , <final-bg-layer>    
  
<bg-layer> =   
  <bg-image>                      || (en-US)  
  <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US)  || (en-US)  
  <repeat-style>                  || (en-US)  
  <attachment>                    || (en-US)  
  <visual-box>                    || (en-US)  
  <visual-box>                      
  
<final-bg-layer> =   
  <bg-image>                      || (en-US)  
  <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US)  || (en-US)  
  <repeat-style>                  || (en-US)  
  <attachment>                    || (en-US)  
  <visual-box>                    || (en-US)  
  <visual-box>                    || (en-US)  
  <'background-color'>              
  
<bg-image> =   
  <image>  | (en-US)  
  none       
  
<bg-position> =   
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)  
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)  
  [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US)    
  
<bg-size> =   
  [ (en-US) <length-percentage [0,∞]> | (en-US) auto ] (en-US){1,2} (en-US)  | (en-US)  
  cover                                      | (en-US)  
  contain                                      
  
<repeat-style> =   
  repeat-x                                     | (en-US)  
  repeat-y                                     | (en-US)  
  [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){1,2} (en-US)    
  
<attachment> =   
  scroll  | (en-US)  
  fixed   | (en-US)  
  local     
  
<visual-box> =   
  content-box  | (en-US)  
  padding-box  | (en-US)  
  border-box     
  
<image> =   
  <url>       | (en-US)  
  <gradient> (en-US)    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
<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
<p class="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>
```

### CSS


```css
.warning {
  background: red;
}

.topbanner {
  background: url("starsolid.gif") #00d repeat-y fixed;
}
```

### Результат

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

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

{cssinfo}}

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

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

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

* `-moz-background-inline-policy` (en-US)
* Использование градиентов (en-US)
* Несколько backgrounds (en-US)