What's the Shorthand for the CSS background Property?

Syntax

The following CSS background properties can be written in a shorthand syntax:

background:
    #ccc                  /* background-color */
    url('foo.png')        /* background-image */
    top left / 100% auto  /* background-position / background-size */
    no-repeat             /* background-repeat */
    fixed                 /* background-attachment */
    padding-box           /* background-origin */
    content-box           /* background-clip */
;

Order

Generally, the order in which the properties appear does not matter. Consider, for example, the following two examples, which are both equivalent:

background: no-repeat url('foo.png') #ccc;

background: #ccc url('foo.png') no-repeat;

There are, however, some exceptions to the rule that you should be aware of, to avoid surprises.

Combining Properties

You may use any combination of the background properties, for example:

/* background-color only */
background: #ccc;

/* background-image and background-repeat only */
background: url('footer.png') no-repeat;

/* ... */

Multiple Backgrounds

With CSS background property you may specify more than one background layer separated by a comma. For example:

background:
    url('layer-1.png') no-repeat,
    #ccc url('layer-2.png') no-repeat,
    /* ... */
;

One important thing to note is that the background-color property only applies to the final background layer, for example:

background:
    url('layer-1.png') no-repeat,
    url('layer-2.png') repeat-x,
    #ccc url('layer-3.png') repeat-x,
    /* ... */
;

Other background properties, however, can be specified/applied (zero or one time) on each layer.