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.

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

Синтаксис

/* Использование свойства <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)
<box> || (en-US)
<box>

<final-bg-layer> =
<'background-color'> || (en-US)
<bg-image> || (en-US)
<bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US)
<repeat-style> || (en-US)
<attachment> || (en-US)
<box> || (en-US)
<box>

<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

<box> =
border-box | (en-US)
padding-box | (en-US)
content-box

<image> =
<url> | (en-US)
<gradient> (en-US)

<length-percentage> =
<length> | (en-US)
<percentage>

<url> =
url( <string> (en-US) <url-modifier>* (en-US) ) | (en-US)
src( <string> (en-US) <url-modifier>* (en-US) )

Примеры

HTML

<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

CSS

.warning {
  background: red;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}

Результат

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

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

{cssinfo}}

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

BCD tables only load in the browser

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