Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The property is a shorthand that sets the following properties in a single declaration: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

As with all shorthand properties, any omitted sub-values will be set to their initial value.

 

Синтаксис

/* Использование свойства <background-color> */
background: green;

/* Использование свойств <bg-image> и <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
Предупреждение: The background-color can only be defined on the last background, as there is only one background color for the whole element.

Значения

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

<attachment>
See background-attachment
<box>
See background-clip
<background-color>
See background-color
<bg-image>
See background-image
<position>
See background-position
<repeat-style>
See background-repeat
<bg-size>
See background-size. This property must be specified after <position>, separated with the '/' character.

Формальный синтаксис

[ <bg-layer> , ]* <final-bg-layer>

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

где
<bg-image> = none | <image>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-box

где
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>

где
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient() <a="" href="/ru/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">| <conic-gradient()></repeating-radial-gradient()>

где
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> && <color-stop-length>
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>

где
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

Примеры

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; 
}

Результат

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

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'background' в этой спецификации.
Кандидат в рекомендации Поддержка мультифонов и свойств background-size, background-origin и background-clip.
CSS Level 2 (Revision 1)
Определение 'background' в этой спецификации.
Рекомендация Нет значительных изменений
CSS Level 1
Определение 'background' в этой спецификации.
Рекомендация Первоначальное определение

{cssinfo}}

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

 

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 2Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 5Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка Да
Multiple backgroundsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 1.3WebView Android Полная поддержка 2Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка Да
SVG image as backgroundChrome Полная поддержка 31Edge Полная поддержка 12Firefox Полная поддержка 9IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4.2Samsung Internet Android ?
Values of background-size longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 9IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 18Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4Samsung Internet Android Полная поддержка Да
Values of background-origin longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 22IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 22Opera Android Нет поддержки НетSafari iOS Полная поддержка 4Samsung Internet Android ?
Values of background-clip longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 22IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 22Opera Android Нет поддержки НетSafari iOS Полная поддержка 4Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

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

Метки документа и участники

Внесли вклад в эту страницу: roman-kosov, fscholz, andreww2012
Обновлялась последний раз: roman-kosov,