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

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-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-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-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-clip.

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

.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 */
}
                

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

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

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