CSS Background Shorthand Property

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) left top 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: left top; background-repeat: no-repeat; background-color: #000; }

Syntax

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

1. background-image
2. background-position
3. background-size
4. background-repeat
5. background-attachment
6. background-origin
7. background-clip
8. 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

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) left top/cover no-repeat fixed; /* Invalid! background-size is declared before background-position */ background: url(photo.jpg) cover/left top no-repeat fixed; /* Invalid!
 background-size doesn't immediately follow background-position */ background: url(photo.jpg) left top no-repeat/cover fixed; /* Invalid! The slash (/) is missing */ background: url(photo.jpg) left top 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 horizontal position
• the second value refers to the vertical position

For example, 0% 50% means that the background image is to be positioned at the left center of the element, and nottop 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) left top no-repeat,url(photo2.jpg) left center 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) left top no-repeat, red url(photo2.jpg) left center no-repeat; } /* Invalid! The first group has a background-color value */ body { background: red url(photo.jpg) left top no-repeat, url(photo2.jpg) left center no-repeat; } /* Invalid! Both groups have background-color values */ body { background: red url(photo.jpg) left top no-repeat, red url(photo2.jpg) left center 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.

Related Content

• Responsive Full Background Image Using CSS
• Examples of Full-Screen Background Images
• Websites with Large Background Images: 25 Inspiring Examples