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)
<image()> | (en-US)
<image-set()> | (en-US)
<cross-fade()> | (en-US)
<element()> | (en-US)
<gradient>

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

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

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

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

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

<gradient> =
<linear-gradient()> | (en-US)
<repeating-linear-gradient()> (en-US) | (en-US)
<radial-gradient()> | (en-US)
<repeating-radial-gradient()> (en-US)

<image-tags> =
ltr | (en-US)
rtl

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

<color> =
<absolute-color-base> | (en-US)
currentcolor | (en-US)
<system-color> | (en-US)
<device-cmyk()>

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

<cf-image> =
<percentage>? (en-US) && (en-US)
[ (en-US) <image> | (en-US) <color> ] (en-US)

<id-selector> =
<hash-token>

<linear-gradient()> =
linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )

<radial-gradient()> =
radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> ] (en-US)? (en-US) , <color-stop-list> )

<absolute-color-base> =
<hex-color> (en-US) | (en-US)
<named-color> | (en-US)
transparent | (en-US)
<rgb()> | (en-US)
<rgba()> | (en-US)
<hsl()> | (en-US)
<hsla()> | (en-US)
<hwb()> | (en-US)
<lab()> | (en-US)
<lch()> | (en-US)
<oklab()> | (en-US)
<oklch()> | (en-US)
<color()>

<device-cmyk()> =
device-cmyk( <cmyk-component>{4} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) )

<side-or-corner> =
[ (en-US) left | (en-US) right ] (en-US) || (en-US)
[ (en-US) top | (en-US) bottom ] (en-US)

<color-stop-list> =
<linear-color-stop> , [ (en-US) <linear-color-hint>? (en-US) , <linear-color-stop> ] (en-US)# (en-US)

<position> =
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) start | (en-US) end | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) x-start | (en-US) x-end | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) y-start | (en-US) y-end | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) left | (en-US) right | (en-US) x-start | (en-US) x-end ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom | (en-US) y-start | (en-US) y-end ] (en-US) <length-percentage>? (en-US) ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) start | (en-US) end ] (en-US) <length-percentage>? (en-US) ] (en-US) [ (en-US) center | (en-US) [ (en-US) start | (en-US) end ] (en-US) <length-percentage>? (en-US) ] (en-US)

<rgb()> =
rgb( [ (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) ) | (en-US)
rgb( [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<hsl()> =
hsl( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<hwb()> =
hwb( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<lab()> =
lab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<lch()> =
lch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<oklab()> =
oklab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<oklch()> =
oklch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<color()> =
color( <colorspace-params> [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<cmyk-component> =
<number> | (en-US)
<percentage>

<alpha-value> =
<number> | (en-US)
<percentage>

<linear-color-stop> =
<color> && (en-US)
<length-percentage>? (en-US)

<linear-color-hint> =
<length-percentage>

<hue> =
<number> | (en-US)
<angle> | (en-US)
none

<colorspace-params> =
<predefined-rgb-params> | (en-US)
<xyz-params>

<predefined-rgb-params> =
<predefined-rgb> [ (en-US) <number> | (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US)

<xyz-params> =
<xyz-space> [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US)

<predefined-rgb> =
srgb | (en-US)
srgb-linear | (en-US)
display-p3 | (en-US)
a98-rgb | (en-US)
prophoto-rgb | (en-US)
rec2020

<xyz-space> =
xyz | (en-US)
xyz-d50 | (en-US)
xyz-d65

Примеры

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 4
# the-background

{cssinfo}}

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

BCD tables only load in the browser

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