CSS Background Shorthand Property

Posted: 12 Jan 2015 07:45 AM PST

The background shorthand property is a way to specify the values of multiple CSS background properties in a single declaration.

Example

body {    background: url(photo.jpg) top left no-repeat #000;  }

The example above specifies four background properties in one declaration and is the same as writing:

body {    background-image: url(photo.jpg);    background-position: top left;    background-repeat: no-repeat;    background-color: #000;  }

Syntax

Here are the eight background properties that can be declared using the background shorthand property:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

The general syntax of the background property is:

background: [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

Each property value is separated by at least one spacing character.

When specifying a background-size value, it must immediately follow the background-position value. Additionally, the background-position and background-size must have a slash (/) in between them (e.g. top right/contain).

The following rule set utilizes all eight background properties using longhand syntax:

body {    background-image: url(photo.jpg);    background-position: center center;    background-size: cover;    background-repeat: no-repeat;    background-attachment: fixed;    background-origin: padding-box;    background-clip: border-box;    background-color: #ccc;  }

(When used, the above style rule will result in a responsive full background image that covers the entire viewport.)

The style rule above can be shortened to just one line as follows:

body {    background: url(photo.jpg) center center/cover no-repeat fixed padding-box border-box #ccc;  }

And since:

padding-box is the default value of background-origin
border-box is the default value of background-clip

The style rule can be further shortened
by omitting those two property values:

body {    background: url(photo.jpg) center center/cover no-repeat fixed #ccc;  }

As can be seen above, the background shorthand syntax is useful in reducing the amount of CSS we have to write. The longhand syntax above occupies 272 bytes, while the last shorthand syntax shown above only occupies 81 bytes — a -108.2% reduction of code.

Behavior

Here are some things to keep in mind when using the background shorthand property.

Do you have to declare all background property values?

You don’t need to declare all eight background property values. At the minimum, you just need one valid property value.

For example, if you just want to give an element a green background, you can write:

div {    background: green;  }

Which is equivalent to:

div {    background-color: green;  }

How are undeclared property values treated?

A background property value that isn’t explicitly specified in the background shorthand property declaration will be equal to its default value, or it may inherit values from your other style rules.

For example, the following style rule only specifies the value for background-image and background-repeat:

background: url(small-photo.jpg) no-repeat;

Thus, the other six properties that aren’t declared are given their default values, such that the above is equal to the following:

background: url(small-photo.jpg) no-repeat;    /* The following properties are implicitly assigned  their respective default values */  background-position: 0% 0%;  background-size: auto;  background-repeat: repeat;  background-attachment: scroll;   background-origin: padding-box;  background-clip: border-box;  background-color: transparent;

Note: The example above assumes there are no inheritable properties from other rule sets in the stylesheet. If other rule sets affect these unspecified properties, then it will inherit those values according to CSS inheritance rules.

Default Values of Background Properties

Property	Default Value
`background-image`	`none`
`background-position`	`0% 0%` (this is the same as `top left`)
`background-size`	`auto`
`background-repeat`	`repeat`
`background-attachment`	`scroll`
`background-origin`	`padding-box`
`background-clip`	`border-box`
`background-color`	`transparent`

Does the order of property values matter?

In most cases the sequence of declaring background property values doesn’t matter. There are three exceptions to this rule (we’ll discuss them shortly).

Hence, the following:

background: repeat-x url(photo.jpg) orange 0% 50%;

Is the same as:

background: 0% 50% orange url(photo.jpg) repeat-x;

The first exception is background-origin and background-clip must be declared in the correct order. This is because they can share the same value. Both properties can have one of these three values: border-box, padding-box or content-box.

If only one of the values are found in the background shorthand property, it’s not as big of an issue because it’s assumed that the value is being assigned to both background-origin and background-clip.

For instance, the following:

background: content-box url(photo.jpg);

Is the same as:

background-origin: content-box;  background-clip: content-box;  background-image: url(photo.jpg);

However, when two values are present, it applies the first value to background-origin and the second one to background-clip.

For example, the following:

background: border-box url(photo.jpg) padding-box;

Is the same as:

background-origin: border-box;  background-image: url(photo.jpg);  background-clip: padding-box;

The second exception is background-size must be declared immediately after background-position, and both properties must be separated by a slash (/).

The following shows the correct way of specifying the background-size and background-position within the background shorthand property (as well as erroneous examples).

Examples

/* Correct */  background: url(photo.jpg) top left/cover no-repeat fixed;    /* Invalid!  background-size is declared before background-position */  background: url(photo.jpg) cover/top left no-repeat fixed;    /* Invalid!  background-size doesn't immediately follow background-position */  background: url(photo.jpg) top left no-repeat/cover fixed;    /* Invalid!  The slash (/) is missing */  background: url(photo.jpg) top left cover no-repeat fixed;

The third exception is when you use two numerical values for the background-position property.

When using two numerical values for background-position:

the first value refers to the vertical position
the second value refers to the horizontal position

For example, 0% 50% means that the background image is to be positioned at the top-center of the element, and not left-center.

However, when using two position keywords (i.e. top, right, bottom, left or center) their order doesn’t matter.

For example, bottom right is the same as saying right bottom.

But you must make sure one keyword refers to the vertical position and the other keyword refers to the horizontal position.

For example, right left and top bottom are invalid.

Finally, the two background-position values — whether they’re numerical values or position keyword values — must be right next to each other.

Here are several correct and invalid examples of using two values for background-position.

Examples

/* Correct */  background: 0% 0% url(photo.jpg) no-repeat;    /* Correct */  background: url(photo.jpg) no-repeat top left;    /* Correct */  background: url(photo.jpg) left top no-repeat;    /* Invalid!  The background-position values both refer to horizontal positions */  background: url(photo.jpg) no-repeat left right;    /* Invalid!  The background-position values are not next to each other */  background: left url(photo.jpg) no-repeat top;

Multiple Backgrounds

You can give an HTML element more than one background with the background shorthand property. Each group of background properties must be separated by commas (,).

The following example assigns the body element two background images. The first is located at the top-left of the web page, while the other is located at the center-left of the web page. Notice that the corresponding background properties for each background is delineated by a comma.

Example

body {    background: url(photo.jpg) top left no-repeat,                url(photo2.jpg) center left no-repeat #ccc;  }

The one rule to keep in mind when setting multiple backgrounds is this: Only the last group of background properties can have a background-color property.

If a background-color property value is found anywhere else besides the last set of background properties, the background shorthand property will be ignored by the browser.

Examples

/* Correct  The last group contains the background-color property  */  body {    background: url(photo.jpg) top left no-repeat,                red url(photo2.jpg) center left no-repeat;  }    /* Invalid!  The first group has a background-color value */  body {    background: red url(photo.jpg) top left no-repeat,                url(photo2.jpg) center left no-repeat;  }    /* Invalid!  Both groups have background-color values */  body {    background: red url(photo.jpg) top left no-repeat,                red url(photo2.jpg) center left no-repeat;  }

Conclusion

The background shorthand property is useful because it allows us to do more with less code.

The biggest tip I can offer to those using the background shorthand property is to establish a standardized way of ordering the background property values. Having a guideline makes the property declaration easier to read and write. It can also help you avoid logic errors/bugs, such as when background-origin and background-clip values are incorrectly-arranged.

Also, when specifying many property values with the background shorthand property, it will become harder to read and maintain. Consider declaring the not-so-popular and infrequently-used background properties on their own. For instance, I prefer declaring background-size, background-attachment, background-origin and background-clip as separate declarations outside the background shorthand property.

Example

body {    background: url(photo.jpg) 50% 50% repeat-x #ccc;    background-size: cover;    background-attachment: fixed;    background-origin: border-box;    background-clip: padding-box;  }

It makes the style rule more readable in my opinion.

Lastly, as a best practice, whenever you’re specifying the background-image property, you should also specify a good fallback background-color property alongside it even if it’s not mandatory, for the purpose of graceful degradation.

Example

div {    color: white;    /* Fallback color is black because foreground color is white */    background: url(photo.jpg) 50% 50% repeat-x black;  }

With a good background-color property, users can still read the text even though the background image is still loading, or in the event that there’s a web server failure that prevents the background image from loading.