background

Описание

The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values.

Синтаксис

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

Значения

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

<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>
where 
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>
where 
<bg-image> = none | <image>
<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

Примеры

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

Результат

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

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

	Desktop Browsers					Mobile Browsers
	Chrome for Desktop	Firefox for Desktop	Internet Explorer for Desktop	Opera for Desktop	Safari for Desktop	Android Browser	Firefox for Android	Internet Explorer Mobile	Opera Mobile	Safari for iOS
Базовая поддержка	1.0Полная поддержка	1.0Полная поддержка	4.0Полная поддержка	3.5Полная поддержка	1.0Полная поддержка	2.1Полная поддержка	1.0Полная поддержка	10.0Полная поддержка	5.0Полная поддержка	3.2Полная поддержка
Multiple backgrounds	1.0Полная поддержка	3.6Полная поддержка	9.0Полная поддержка	10.5Полная поддержка	1.3Полная поддержка	2.1Полная поддержка	1.0Полная поддержка	10.0Полная поддержка	5.0Полная поддержка	3.2Полная поддержка
SVG image as background	31.0Полная поддержка	4.0Полная поддержка	9.0Полная поддержка	21.0Полная поддержка	5.1Полная поддержка	3.0Полная поддержка	4.0Полная поддержка	10.0Полная поддержка	?	4.2Полная поддержка
Support for background-size	21.0Полная поддержка	18.0Полная поддержка	9.0Полная поддержка	21.0Полная поддержка	5.1Полная поддержка	3.0Полная поддержка	18.0Полная поддержка	10.0Полная поддержка	ДаПолная поддержка	4.0Полная поддержка
Support for background-origin and background-clip	31.0Полная поддержка	22.0Полная поддержка	9.0Полная поддержка	21.0Полная поддержка	5.1Полная поддержка	3.0Полная поддержка	22.0Полная поддержка	10.0Полная поддержка	НетНет поддержки	4.0Полная поддержка

Легенда

Полная поддержка 

Полная поддержка

Нет поддержки 

Нет поддержки

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

• -moz-background-inline-policy
• Using gradients
• Multiple backgrounds