The background property is a shorthand property for setting most background properties at the same place in the style sheet. The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of background-image, background-position, background-size, background-repeat, background-origin, background-clip and background-attachment to that property's initial value, then assigns any explicit values specified for this layer in the declaration. Finally background-color is set to the specified color, if any, else set to its initial value.

  • Initial valueSee individual properties
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueSee individual properties
  • AnimatableSee individual properties
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript syntaxobject.style.background
Formal syntax: [ <bg-layer> , ]* <final-bg-layer> 

<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>{1,2} || <background-color>
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>
body {
   background: url(images/graphic.jpg) #FFF7B5 30% repeat fixed;
}

Click the button below to experiment with this property.

Give it a Try!

1+Firefox6+Explorer1+Chrome1+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.