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

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

background: green;

background: content-box radial-gradient(crimson, skyblue);

background: no-repeat url("/shared-assets/images/examples/lizard.png");

background: left 5% / 15% 60% repeat-x  url("/shared-assets/images/examples/star.png");

background:  center / contain no-repeat    url("/shared-assets/images/examples/firefox-logo.svg"),  #eee 35% url("/shared-assets/images/examples/lizard.png");

<section>  <div></div></section>

#example-element {  min-width: 100%;  min-height: 100%;  padding: 10%;}

Свойство являетсясокращением, которое устанавливает следующие свойства в одном объявлении: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");

Значения

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

<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>#? ,<final-bg-layer>

<bg-layer> =
<bg-image>||
<bg-position>[ /<bg-size>]?||
<repeat-style>||
<attachment>||
<bg-clip>||
<visual-box>

<final-bg-layer> =
<bg-image>||
<bg-position>[ /<bg-size>]?||
<repeat-style>||
<attachment>||
<bg-clip>||
<visual-box>||
<'background-color'>

<bg-image> =
<image>|
none

<bg-position> =
<position>|
<position-three>

<bg-size> =
[<length-percentage [0,∞]>|auto]{1,2}|
cover|
contain

<repeat-style> =
repeat-x|
repeat-y|
repeat-block|
repeat-inline|
<repetition>{1,2}

<attachment> =
scroll|
fixed|
local

<bg-clip> =
<visual-box>|
[border-area||text]

<visual-box> =
content-box|
padding-box|
border-box

<background-color> =
<color>

<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<position> =
<position-one>|
<position-two>|
<position-four>

<position-three> =
[left|center|right]&&[[top|bottom]<length-percentage>]|
[[left|right]<length-percentage>]&&[top|center|bottom]

<length-percentage> =
<length>|
<percentage>

<repetition> =
repeat|
space|
round|
no-repeat

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<element()> =
element(<id-selector>)

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

<image-tags> =
ltr|
rtl

<image-src> =
<url>|
<string>

<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?

<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?

<id-selector> =
<hash-token>

Примеры

HTML

<p>  Starry sky<br />  Twinkle twinkle<br />  Starry sky</p><p>Here is a paragraph</p><p></p>

CSS

.warning {  background: red;}.topbanner {  background: url("star-solid.gif") #00d repeat-y fixed;}

Результат

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

{cssinfo}}

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

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

• -moz-background-inline-policy
• Использование градиентов
• Несколько backgrounds