Writing background-color, background-image, background-position, background-size, and background-repeat on five separate lines works perfectly well, but it quickly gets tedious to scan. The background shorthand rolls all of that into a single declaration.
That compactness comes at a price: a poorly understood shorthand silently wipes out settings you thought were locked in, and the order of values inside it is not always free to choose.
Definition
background is the shorthand that combines background-color, background-image, background-position, background-size, background-repeat, background-attachment, background-origin, and background-clip into one property. Any sub-property not mentioned inside the shorthand resets to its initial value, even if it had been set elsewhere just before.
.hero {
background: #0f172a url("/images/hero.jpg") center / cover no-repeat;
}
/* the same thing written out longhand */
.hero-longhand {
background-color: #0f172a;
background-image: url("/images/hero.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}background further down a stylesheet, even just to change the color, resets any image, position, or size previously set on the same element. To touch a single setting, use the specific sub-property, such as background-color alone, instead of the full shorthand.background-size: cover versus contain
Both keywords answer the same question, filling a space with an image, but not the same way. cover scales the image up until it fills the whole surface, cropping its edges if the proportions do not match exactly. contain keeps the entire image visible, at the cost of leaving empty bands on the sides or top and bottom.
| Value | Behavior | Typical case |
|---|---|---|
cover | Fills the whole space, may crop the image | Cover photo, banner |
contain | Shows the entire image, may leave empty bands | Logo on a brand-colored background |
Position and size: the slash order trap
Inside the shorthand, background-position and background-size are written one after the other, separated by a slash, and that exact order is not up for choosing: position always comes before the slash, size always after. Swapping the two, or dropping the slash and assuming two keywords will be enough to tell them apart, produces a silently wrong result instead of a visible error in the console.
/* correct: position, then slash, then size */
background: url("photo.jpg") top center / cover no-repeat;
/* wrong: position/size order is swapped */
background: url("photo.jpg") cover / top center no-repeat;background-attachment: a background that stays put
background-attachment: fixed anchors the image to the viewport rather than to the element carrying it: content scrolls over it while the image stays still, producing a simple sense of depth often called a light parallax effect. This setting behaves inconsistently on some mobile browsers, though, where it is frequently ignored for performance reasons: it is worth testing on an actual phone before relying on it.
Frequently asked questions
Most likely because the change rewrote the entire background shorthand instead of the single background-color sub-property. Any value left out of a CSS shorthand reverts to its initial state, including an image set by an earlier or inherited rule.
cover or contain for a round profile picture?cover, in nearly every case: a profile picture should fill the entire circle with no empty bands, even if it means cropping the edges slightly. contain would only make sense if showing the entire framing of the image mattered more than fully filling the shape, which is rare on this kind of element, similar to object-fit for the same kind of image placed in an <img> tag.
For most values, no: the browser recognizes a color, an image, or a repeat keyword regardless of the order they are written in. The one strictly ordered pair is position and size, separated by a slash, where position must always come first.