Stacking Multiple Backgrounds in CSS
Think of CSS backgrounds as a stack of transparent sheets where the first image listed is on top. This lets you layer logos over gradients or combine patterns without extra HTML. The footgun: the first image in the code is the frontmost on screen.
Why it exists
To create visually rich designs with multiple layers—like textures, gradients, and logos—without adding extra, non-semantic HTML elements. This keeps your markup clean and separates presentation from content.
The mental model
Imagine stacking transparent sheets on top of an element. The first image you list in your CSS is the top sheet, closest to the viewer. Each subsequent image is a sheet placed behind the previous one. The element's background-color acts as the solid, opaque base at the very bottom of the stack.
How it works
You provide a comma-separated list of values to the background-image property. Other background properties like background-repeat, background-position, and background-size also accept comma-separated lists that correspond to each image layer. The first value in background-position applies to the first image, the second to the second, and so on. If you provide fewer values than images for a property, the browser repeats the list of values until all layers are covered.
When to use it
Use this for layering a logo over a gradient, combining multiple texture patterns, or placing a watermark on top of another image. It's a powerful tool for decorative effects that don't represent actual page content.
When not to use it
Avoid using this for images that are critical content. Since they are backgrounds, they are invisible to screen readers and may not print by default. For content images, always use an <img> tag with an appropriate alt attribute.
One canonical example
An element has three backgrounds: a logo, a bubble pattern, and a gradient. The CSS is background-image: url('logo.png'), url('bubbles.png'), linear-gradient(...);. The logo.png will appear on top of the bubbles, and the bubbles will appear on top of the gradient. Only the last layer can have a background-color. If you wrote background-repeat: no-repeat;, it would apply no-repeat to all three layers because the single value is repeated to match the number of images.
Interview question
Given `background-image: url('logo.png'), url('pattern.png');` and `background-repeat: no-repeat;`, how does `background-repeat` apply?
- a.The CSS is invalid because `background-repeat` requires two values for two images.
- b.Only `pattern.png` will not repeat, as it is the base layer.
- c.Both `logo.png` and `pattern.png` will not repeat.Correct
- d.Only `logo.png` will not repeat, while `pattern.png` will repeat by default.
Why? this is the answer
The card states that if fewer values are provided for a background property than there are images, the browser repeats the list of values. Therefore, the single `no-repeat` value applies to both images. It is not invalid to provide fewer values, nor does it apply only to the first or last layer.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
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