CSS background

The CSS background property is a shorthand property for setting the background of an HTML element.

This property enables you to set most background properties with one property.

The background property sets the following properties:

Syntax

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

Where

<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'>

The number of comma-separated items defines the number of background layers.

Possible Values

bg-image
Sets the background-image property.
position
Sets the background-position property.
bg-size
Sets the background-size property.
repeat-style
Sets the background-repeat property.
attachment
Sets the background-attachment property.
box
If one box value is present then it sets both background-origin and background-clip to that value. If two values are present, then the first sets background-origin and the second background-clip.
'background-color'
Sets the background-color property.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
This is based on the individual properties' values. Their initial values are as follows:
background-image
none
background-position
0% 0%
background-size
auto
background-repeat
repeat
background-attachment
scroll
background-color
transparent
background-origin
padding-box
background-clip
border-box
Applies To
All elements
Inherited?
No
Media
Visual
Animatable
Yes (see example)

Example Code

background: url("/pix/smile.gif") blue 90% 30% no-repeat fixed

Official Specifications