Multiple Backgrounds

You will be able to layer multiple background images, gradients, and a fallback color on one CSS element using the background shorthand or background-image.

What it is

Multiple backgrounds let one element have more than one background layer. Each layer can be an image, gradient, or pattern. The layers are painted in the order you write them: the first layer is on top, and later layers appear underneath. This is useful because CSS treats gradients as images, so you can combine a gradient overlay with a photo or texture without adding extra HTML elements.

Related terms include background-image, background-position, background-size, background-repeat, background-color, and stacking order.

Why it matters

• It creates hero banners with a photo, dark overlay, and fallback color in one rule.
• It adds texture or pattern layers without extra markup.
• It lets you combine gradients and images for depth and readability.
• It reduces DOM complexity when the layers are purely decorative.

Syntax or steps

The smallest useful pattern lists background layers separated by commas:

.banner {
  background: url('top.png'), url('bottom.png');
}

For production CSS, give each layer its own position, size, and repeat values. In the background shorthand, a color can appear only in the final layer:

.banner {
  background:
    url('top.png') center / cover no-repeat,
    url('bottom.png') left bottom / contain repeat-x,
    #ffffff;
}

Read each comma-separated part as one layer. The slash separates position from size, for example center / cover.

Example

.hero {
  background:
    linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
    url('hero.jpg') center / cover no-repeat,
    #0f172a;
  min-height: 320px;
}

Part-by-part explanation

• linear-gradient(...) is the top layer. It darkens the image so text remains readable.
• url('hero.jpg') center / cover no-repeat is the middle layer. It places the photo behind the gradient, centers it, scales it to cover the element, and prevents tiling.
• #0f172a is the final layer and fallback color. It shows if the image fails to load or while the image is loading.
• min-height gives the element space so the background layers are visible.

Common mistakes

• Wrong layer order: If the gradient is listed after the image, the image covers it. Put the layer you want visible first.
• Color in the wrong place: background: #fff, url('photo.jpg'); is invalid because the color must be in the final layer. Write background: url('photo.jpg'), #fff;.
• Forgetting per-layer values: If you use background-image alone, also set background-position, background-size, and background-repeat with matching comma-separated lists.
• Overwriting layers: A later background-image declaration replaces the previous image list. Combine all layers in one declaration or use the shorthand carefully.

When to use it

Multiple backgrounds are best for simple decorative stacking. Compare them with the closest alternatives:

Practice

Guided exercise: create a .banner rule that layers a semi-transparent gradient over an image and ends with a fallback color.

1. Start with background:.
2. Add linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)).
3. Add url('banner.jpg') center / cover no-repeat.
4. Finish with #222222.

Expected output: the gradient appears above the image, and the dark color appears if the image is unavailable.

Challenge: add a third layer using repeating-linear-gradient to create subtle stripes. Hint: place the stripe layer first if you want it on top, or after the image if you want it underneath.

Quick check

Which background layer appears on top when multiple layers are listed?

Answer: The first layer listed appears on top.

Summary

Multiple backgrounds let you stack images, gradients, patterns, and a final fallback color on one element. Remember that layer order matters: the first layer is painted on top, and the color belongs only in the final layer.