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

Syntax

css

selector {
  background: url("image1") position no-repeat,
              url("image2") position repeat,
              color;
}

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.

Note:

Accepted values:
comma-separated layers — the first listed is on top
url() and gradients — can be mixed in one declaration
background-position — a value per layer
background-size — a value per layer
background-color — only allowed on the last layer

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.

Note:

Accepted values:
comma-separated layers — first layer is on top
per-layer repeat, position and size — also comma-separated
url() and gradients — can be mixed in one list
background-color — only allowed in the final 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.

Note:

Accepted values:
url("...") — an image file
linear-gradient() — a straight-line color gradient
radial-gradient() — a circular or elliptical gradient
conic-gradient() — a gradient swept around a center point
none — no image (initial value)
several values separated by commas — stacked layers
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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>

Live Example

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

CSS Multiple Backgrounds

Stacking Backgrounds with Commas

Per-Layer Repeat, Position, and Size

Mixing Images and Gradients

Only One background-color

Common Multi-Background Patterns

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code