Menu

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:

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) 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:

For example, 0% 50% means that the background image is to be positioned at the left center of the element, and not top 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

About the Author

Jacob Gube is the founder of Six Revisions and a front-end web developer. Join him on Twitter @sixrevisions and Facebook.

This was published on Jan 12, 2015

12 Comments

Ingermar Peter Turner Jan 12 2015

I usually visit W3School for info on HTML CSS and JavaScript and they usually have a practice page with the code on one side and the result on the other. Anyway it is good to have a reference page like this one. I have marked it as favourite on my PC.
Best wishes IPT.

Karla Jan 12 2015

Really helpful. Thx.

21coders Jan 13 2015

Very useful, Thanks for sharing.

Alex Simitsis Jan 13 2015

You are wrong about background-position property, 0% 50% means that the background image is to be positioned at the left-center of the element, and not top-center.

Jacob Gube Jan 15 2015

@Alex Simitsis: You are absolutely correct. That was a massive error on my part. Thank you for commenting about that.

I apologize to everyone for my unforgivable error. I have now updated the post accordingly.

First value is x-axis (horizontal position/offset) and second value is y-axis (vertical position/offset). I switched it around by mistake.

Dmitry Pytkin Jan 19 2015

I think you should add info about gradients (img + gradient, gradient + color, multiple gradients).

Jacob Gube Jan 20 2015

@Dmitry Pytkin: Great idea, but I’d like to do that as a separate article and just refer/link to this one. I didn’t want to unnecessarily complicate the background shorthand property topic with background color gradients.

Justin Spencer Jan 20 2015

Jacob, You are truely an amazing blogger. You seem to shine in future with great knowledge. And it is quite a few people can accept their mistakes.
I want some more articles on PSD conversions. Wil be waiting for that

Serge Rodrigue Feb 19 2015

In order to work properly in Safari, I was not able to use background-position property in shorthand with image sprite. And it is quite a challenge to resize buttons smaller when using image sprite.

Herman Bovens Mar 12 2015

The info regarding unspecified values for shorthand properties is wrong:

“If other rule sets affect these unspecified properties, then it will inherit those values according to CSS inheritance rules.”

According to the spec, unspecified properties will get their initial value (i.e. the default value, not the inherited one).

Dario Fumagalli Apr 10 2015

Hello,

As of today I still see a lot of “top left” examples, most probably because of the previous x and y inversion.

These examples are misleading as well, because “top left” in your examples work only because many browsers are smart enough to correctly interpret “top” and “left” even when you enter them in the wrong order.

Now imagine an inexperienced guy copying your examples and who needs to use a specific coordinates in place of “top” and “left”: all his attempts won’t work because he’ll just put his hard coded offsets in place of top and left believing your provided the right order. Of course that won’t work and he’ll get confused.

Considering this is meant to be a reference page, I suggest you invert top and left in the various examples so to conform to the actual CSS standard.

    Jacob Gube Apr 10 2015

    Dario you have a point with regards to standardization of the code examples so that it’s always:

    background-position: [x-position] [y-position]

    This encourages a best practice of always using the same order, regardless of whether you’re using keywords, percentage or lengths. Which is good when you’re working in teams/open source.

    But you’re implying that top left is an error. “top left” is valid. It works not because the browser is smart, it works because that’s the CSS specs for background-position when using position keywords.

    You can say top left or left top, that’s up to you as the CSS author. This was discussed in the article above.

    When you say “actual CSS standard”, are you referring to W3C CSS specs of background-position? Here’s what it says (emphasis mine):

    Note that a pair of keywords can be reordered while a combination of keyword and length or percentage cannot. So ‘center left’ is valid while ‘50% left’ is not. 3.6. Positioning Images: the ‘background-position’ property

    Here’s the syntax for setting the values of background-position, from W3C specs. It shows that “top left” is a valid combination:

    <position> = [
      [ left | center | right | top | bottom | <percentage> | <length> ]
    |
      [ left | center | right | <percentage> | <length> ]
      [ top | center | bottom | <percentage> | <length> ]
    |
      [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
      [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
    ]3.6. Positioning Images: the ‘background-position’ property

This comment section is closed. Please contact us if you have important new information about this post.

Partners