Background Shorthand

The background shorthand lets you set multiple background properties in a single declaration.

Full Shorthand Syntax

/* color image position/size repeat attachment */
.hero {
    background: #2c3e50 url('hero.jpg') center/cover no-repeat fixed;
}

Common Patterns

/* Just a color */
.box { background: #f5f5f5; }

/* Image with settings */
.banner {
    background: url('banner.jpg') center/cover no-repeat;
}

/* Color overlay on image */
.overlay {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('photo.jpg') center/cover no-repeat;
}

Order of Values

The shorthand accepts values in any order, with one exception: size must come after position, separated by a slash /:

/* position / size */
background: url('img.jpg') center / cover no-repeat;

Shorthand Gotcha

The shorthand resets any unspecified properties to their defaults. This can accidentally clear properties:

/* This clears background-image! */
.box {
    background-image: url('pattern.png');
    background: #f5f5f5;  /* Oops — image is gone */
}

/* Fix: set both in one shorthand, or use individual properties */
.box {
    background: #f5f5f5 url('pattern.png') repeat;
}