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>, разделенного символом '/'.

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

[ <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()> | <paint()> | <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> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-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> )
<repeating-radial-gradient()> = repeating-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 для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
backgroundChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
SVG image as backgroundChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка 3.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android ?
Values of background-clip longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 22IE Полная поддержка 9Opera Полная поддержка 15Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 25Firefox Android Полная поддержка 22Opera Android Полная поддержка 14Safari iOS Полная поддержка 4Samsung Internet Android ?
Values of background-origin longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 22IE Полная поддержка 9Opera Полная поддержка 15Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 25Firefox Android Полная поддержка 22Opera Android Полная поддержка 14Safari iOS Полная поддержка 4Samsung Internet Android ?
Values of background-size longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 9IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 25Firefox Android Полная поддержка 18Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4Samsung Internet Android Полная поддержка Да
Multiple backgroundsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 1.3WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да

Легенда

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

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