CSS `background`: The All-in-One Shorthand
The CSS background property is a shortcut for styling an element's backdrop, combining color, image, and position in one line. Use it for most background tasks, from simple colors to complex layered images.
Why it exists
Writing out every individual background property like background-color, background-image, and background-repeat is verbose and repetitive. The background shorthand was created to combine up to eight different properties into a single, more readable line of CSS, saving time and code.
The mental model
Think of the background property as a master control panel for an element's backdrop. Instead of tweaking individual knobs for color, image, position, and size separately, you can set them all with one command. If you don't specify a setting, it reverts to its default, like hitting a "reset" button for that specific knob. You can also stack multiple backgrounds on top of each other, like transparent overlays.
How it works
The background property accepts a space-separated list of values for its constituent properties. These include background-color, background-image (using url()), background-repeat, background-position, and background-size. The order is mostly flexible, but with one key rule: background-size must be specified immediately after background-position, separated by a forward slash (/). You can define multiple background layers by separating each layer's set of values with a comma. The first layer you define is the topmost one. Any property you omit is automatically set to its default value.
When to use it
Use the background shorthand when you are defining most or all of an element's background styles from scratch. It's perfect for common patterns like setting a solid color (background: #f0f0f0;), a non-repeating centered image (background: no-repeat center url(...)), or a full-cover image (background: center / cover no-repeat url(...)).
When not to use it
Avoid the shorthand when you only want to modify a single aspect of an existing background style. For example, if an element already has a background-image and you just want to change its color, using background: blue; will accidentally remove the image because background-image is reset to none. In that case, use the specific property: background-color: blue;.
One canonical example
To set a background image that covers the entire element without repeating, and also have a fallback color, you can combine values. The color will be visible if the image fails to load.
background: #eeeeee url("image.png") no-repeat center / cover;
This single line sets the background-color, background-image, background-repeat, background-position, and background-size.
Interview question
When should you generally avoid using the CSS `background` shorthand property?
- a.When the background image needs to cover the entire element without repeating.
- b.When you only intend to modify one specific background property of an already styled element.Correct
- c.When you need to apply multiple background images to an element.
- d.When you are setting a background color and an image simultaneously.
Why? this is the answer
The `background` shorthand resets all unspecified background properties to their default values. Therefore, using it to change only one property on an existing background will inadvertently remove or reset other previously set properties. Options A, B, and D describe scenarios where the shorthand is efficient and recommended.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #design systems
- #shorthand
- #layout
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles