Background Shorthand

The background shorthand property sets all background sub-properties in a single declaration. The order of values matters, and some combinations require special separator syntax.

Shorthand Order

background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip]. The slash (/) is required to separate background-position from background-size.

Multiple Layers

Separate each layer with a comma. Only the final layer may include a background colour.

Caution

Using the shorthand resets any sub-properties not mentioned back to their initial values. Be careful when mixing shorthand and longhand in the same rule block.

Example

/* Full shorthand for a cover hero */
.hero {
    background:
        url("/img/overlay.png") center / cover no-repeat,
        #1a237e;
        /* colour on the last layer */
}

/* Multiple layers, shorthand per layer */
.card {
    background:
        url("/img/logo.svg") right 16px bottom 16px / 60px no-repeat,
        linear-gradient(to bottom, #fff 0%, #f5f5f5 100%);
}

/* Caution: shorthand resets omitted sub-props */
.reset-demo {
    background-attachment: fixed; /* set longhand first */
    background: url("/img/photo.jpg"); /* overwrites attachment! */
}

/* Correct: keep fixed attachment in the shorthand */
.parallax {
    background:
        url("/img/photo.jpg") center / cover no-repeat fixed;
}

CSS

Full Editor

Pro Tip

When reading unfamiliar CSS, remember the slash in the background shorthand separates position from size — center / cover means position: center and size: cover, not two separate values.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned