CSS Multiple Backgrounds

CSS lets one element carry several background images stacked on top of each other, like layers in a design file, all through a single background-image declaration.

In this page:

Stacking Backgrounds with Commas
Per-Layer Repeat, Position, and Size
Mixing Images and Gradients
Only One background-color
Common Multi-Background Patterns

Stacking Backgrounds with Commas

Listing several url() values separated by commas in background-image stacks them, with the first listed rendering on top and the last rendering at the bottom, closest to the element's own background-color.

Example: Stacking Backgrounds with Commas

css

<style>
.box {
  background-image: url('https://placehold.co/50x50'), url('https://placehold.co/300x150');
  height: 150px;
}
</style>
<div class="box">First image layered on top of the second</div>

Per-Layer Repeat, Position, and Size

Each layer can have its own repeat, position, and size by supplying a matching comma-separated list on background-repeat, background-position, and background-size -- the Nth value in each list applies to the Nth image layer.

Example: Per-Layer Repeat, Position, and Size

css

<style>
.box {
  background-image: url('https://placehold.co/30x30'), url('https://placehold.co/300x150');
  background-repeat: no-repeat, no-repeat;
  background-position: top right, center;
  height: 150px;
}
</style>
<div class="box">Each layer gets its own position</div>

Mixing Images and Gradients

Because gradients are valid background-image values, a common technique combines a gradient (often semi-transparent) as the top layer with a photo underneath, used to darken or tint part of an image for text legibility.

Example: Mixing Images and Gradients

css

<style>
.box {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://placehold.co/300x150');
  height: 150px;
  color: white;
}
</style>
<div class="box">Gradient tints the photo underneath</div>

Only One background-color

Unlike background-image, background-color only accepts a single value and always sits beneath every image layer, acting as the final fallback fill visible only where all image layers are transparent or fail to load.

Example: Only One background-color

css

<style>
.box {
  background-image: url('https://placehold.co/30x30');
  background-repeat: no-repeat;
  background-color: navy;
  height: 150px;
}
</style>
<div class="box">Color only shows where the image is transparent</div>

Common Multi-Background Patterns

Typical uses include a decorative pattern layered over a solid color, an icon positioned in a corner over a larger photo, or two gradients combined to create an effect neither could produce alone.

Example: Common Multi-Background Patterns

css

<style>
.box {
  background-image: url('https://placehold.co/20x20'), linear-gradient(45deg, #eee, #eee);
  background-repeat: repeat, no-repeat;
  height: 150px;
}
</style>
<div class="box">Decorative pattern layered over a solid color</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Shorthand Next Lesson → CSS Background Size