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

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