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 = 
  [ (en-US) <bg-layer># (en-US) , ] (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) | (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

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