CSS Background Shorthand

CSS Background Shorthand

The CSS background shorthand property combines several background properties into a single declaration.

Instead of writing separate declarations for the background color, image, position, size, repeat, attachment, origin, and clip, you can often specify them together using background. The shorthand can make a stylesheet more compact, but understanding how its values work together is important.

Background Properties

The background shorthand can set the values of several individual background properties.

Basic background Shorthand

A group of separate background declarations can often be replaced with one background declaration.

.box {
  background-color: lightblue;
  background-image: url("images/landscape-1200x800.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

The same background can be written more compactly:

.box {
  background: lightblue url("images/landscape-1200x800.jpg") center no-repeat;
}

Not every background value must be included. Values that are omitted are assigned their initial values when the shorthand declaration is applied.

Background Position and Size

When background-size is included in the shorthand, it follows background-position and the two are separated by a forward slash.

.box {
  background: lightblue url("images/landscape-1200x800.jpg") center / cover no-repeat;
}

In this declaration, center is the background position and cover is the background size.

The slash is required when a background size is included in the shorthand.

.box {
  background: url("images/leaves-400x400.png") right bottom / 180px auto no-repeat;
}

This positions the leaves at the bottom right and displays them at a width of 180 pixels while preserving their proportions.

Background Origin and Clip

Box values in the background shorthand can set background-origin and background-clip.

.box {
  background: url("images/leaves-400x400.png") no-repeat content-box;
}

When one box value is specified, it sets both background-origin and background-clip.

When two box values are specified, the first sets background-origin and the second sets background-clip.

.box {
  background: url("images/leaves-400x400.png") no-repeat content-box padding-box;
}

Here, the image is positioned relative to the content box while the background is clipped to the padding box.

Background Color

A background color can be included in the shorthand declaration.

.box {
  background: lightblue url("images/leaves-400x400.png") right bottom / 180px auto no-repeat;
}

When multiple background layers are used, the background color can only be specified in the final layer because the color is painted underneath all background images.

Multiple Backgrounds

The background shorthand can define multiple background layers by separating them with commas.

.box {
  background:
    url("images/leaves-400x400.png") right 20px bottom 20px / 180px auto no-repeat,
    lightblue url("images/landscape-1200x800.jpg") center / cover no-repeat;
}

The leaves form the top layer and the landscape forms the layer beneath them. The background color is included with the final layer and is painted below both images.

Each layer can have its own image, position, size, repeat, attachment, origin, and clip values.

Resetting Background Values

Using the background shorthand resets background properties that are not explicitly included in the declaration to their initial values.

.box {
  background-color: lightblue;
  background-repeat: no-repeat;
  background-size: cover;
  background: url("images/landscape-1200x800.jpg");
}

The final background declaration does more than set the image. It also resets omitted background properties, including the previously declared color, repeat, and size values.

For this reason, use the shorthand carefully when earlier rules have already set individual background properties that you intend to preserve.

Longhand vs Shorthand

Longhand properties are often easier to read while learning or when only one background setting needs to change. Shorthand is useful when several related values belong together.

Both approaches are valid. Choose the form that keeps the stylesheet clear and makes future changes easy to understand.

Background Shorthand Example

The following longhand declarations create a centered landscape background that covers the box without repeating.

.box {
  background-color: lightblue;
  background-image: url("images/landscape-1200x800.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

The same result can be written using the background shorthand:

.box {
  background: lightblue url("images/landscape-1200x800.jpg") center / cover no-repeat;
}

Open the example in the editor and compare the two boxes. One uses longhand properties and the other uses shorthand, but both produce the same background.