CSS Reference Property

background

The background property is a shorthand property for setting most background properties at the same place in the style sheet.

Just like other background properties, it can take multiple comma-separated values, where each value corresponds to a background layer.

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

Each background layer specifies the background-image, background-position, background-size, background-repeat, background-origin, background-clip and background-attachment properties for that layer.


<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

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.

In other words, the background shorthand property assigns explicit given values and sets missing properties to their initial values.

This means that if you use the background shorthand and only specify some of the background properties and not all of them, then the other background properties will be set to their initial values in the shorthand property.

For example, in the following we use the background property shorthand but only specify the value for the background-attachment property:

.element {
    background: fixed;
}

The above declaration is equivalent to the following:

.element {
    background-color: transparent;    /* initial value */
    background-position: 0% 0%;       /* initial value */
    background-size: auto auto;       /* initial value */
    background-repeat: repeat repeat; /* initial value */
    background-clip: border-box;      /* initial value */
    background-origin: padding-box;   /* initial value */
    background-attachment: fixed;     /* declared value from the shorthand property */
    background-image: none;           /* initial value */
}

When multiple background layers are declared on an element in the background shorthand property, the background-color value is declared at the end as part of the final background layer.

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

The background color can only be defined on the last background layer because there is only one background color for the whole element.

The <box> value can have one of three possible values: padding-box, content-box, and border-box. (See background-clip property for details.)

Both, the background-clip and background-origin take a <box> value; but what if only one box value is specified in the shorthand property?

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.

Official Syntax

Syntax:

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

/* where */
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

/* and */
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>

Initial: The concatenation of the initial values of the individual properties:
- background-image: none
- background-position: 0% 0%
- background-size: auto auto
- background-repeat: repeat
- background-origin: padding-box
- background-clip: border-box
- background-attachment: scroll
- background-color: transparent
Applies To: all elements
Animatable: Only the background-color, background-position, and background-size properties are animatable

Values

<‘background-image’>: See <a href="http://tympanus.net/codrops/css_reference/background-image">background-image</a> entry for a list of possible values.
<‘background-position’>: See <a href="http://tympanus.net/codrops/css_reference/background-position">background-position</a> entry for a list of possible values.
<‘background-size’>: See <a href="http://tympanus.net/codrops/css_reference/background-size">background-size</a> entry for a list of possible values.
<‘background-repeat’>: See <a href="http://tympanus.net/codrops/css_reference/background-repeat">background-repeat</a> entry for a list of possible values.
<‘background-origin’>: See <a href="http://tympanus.net/codrops/css_reference/background-origin">background-origin</a> entry for a list of possible values.
<‘background-clip’>: See <a href="http://tympanus.net/codrops/css_reference/background-clip">background-clip</a> entry for a list of possible values.
<‘background-attachment’>: See <a href="http://tympanus.net/codrops/css_reference/background-attachment">background-attachment</a> entry for a list of possible values.
<‘background-color’>: See <a href="http://tympanus.net/codrops/css_reference/background-color">background-color</a> entry for a list of possible values.

Notes

The values of the individual background properties in the background shorthand can be shuffled (reordered). The only requirement is that the background-size property must be specified after the background-position property, and they must be separated with the ‘/’ character. You cannot specify the background size in the shorthand property unless you also specify the background position, otherwise the declaration is invalid.

Examples

The following sets a background image on an element using the shorthand property.

.element {
    background: #eee url(path/to/image.jpg) top 50% / contain fixed no-repeat;
}

The above declaration is equivalent to the following single declarations:

.element {
    background-image: url(path/to/image.jpg);
    background-color: #eee;
    background-position: top 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-origin: padding-box; /* initial value */
    background-clip: border-box; /* initial value */
}

Another example and its equivalence:

div {
    background: padding-box url(something.png) deepPink center center;
}
/* The single equivalence */
div {
    background-color: deepPink;
    background-image: url(something.jpg);
    background-repeat: repeat; /* initial */
    background-attachment: scroll; /* initial */ 
    background-position: center center;
    /* only one <box> value is specified in the shorthand 
    declaration, so both the background-origin and the 
    background-clip property get that value */
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto; 
}

The following example uses the background property shorthand to set multiple background layers on an element.

.element {
    background: url(a.png) top left no-repeat,
                url(b.png) center / 100% 100% no-repeat,
                url(c.png) white;
}

The single properties equivalent to the above multiple-background example is the following:

.element {
    background-image:      url(a.png),  url(b.png),          url(c.png);
    background-position:   top left,    center,              top left;
    background-repeat:     no-repeat,   no-repeat no-repeat, repeat;
    background-clip:       border-box,  border-box,          border-box;
    background-origin:     padding-box, padding-box,         padding-box;
    background-size:       auto auto,   100% 100%,           auto auto;
    background-attachment: scroll,      scroll,              scroll;
    background-color:      white;
}

Live Demo

The following live demo shows how to use multiple background images:

View this demo on the Codrops Playground

Browser Support

The background shorthand property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

However, not all background properties are supported in all browsers. For details about the browser support for individual properties, make sure you check the entry for each property.