CSS Background Image

background-image places a picture behind an element's content, which is how hero banners, textured panels, and icon-only buttons get their imagery without an <img> tag.

In this page:

Setting a Background Image
Layering an Image Over a Color
Stacking Multiple Images
Gradients as Background Images
When Background Images Fail

Setting a Background Image

background-image: url('path/to/image.jpg') loads an image and renders it behind the element's content. Unlike an <img> element, a background image is purely decorative to assistive technology and carries no alt text, so it should never be the sole way to convey meaningful content.

Example: Setting a Background Image

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  height: 150px;
}
</style>
<div class="box">Purely decorative, no alt text</div>

Layering an Image Over a Color

background-color and background-image can both be set on the same element; the image renders on top of the color, so the color only shows through any transparent areas of the image or before the image finishes loading. This is a common pattern for providing a solid fallback color behind a photo.

Example: Layering an Image Over a Color

css

<style>
.box {
  background-color: #333;
  background-image: url('https://placehold.co/300x150');
  height: 150px;
}
</style>
<div class="box">Color shows through transparent parts or before load</div>

Stacking Multiple Images

background-image accepts a comma-separated list of url() values, stacking them with the first listed on top and the last at the bottom, similar to layers in a design tool. Each layer can have its own repeat/position/size set via matching comma-separated lists on the other background-* properties.

Example: Stacking Multiple Images

css

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

Gradients as Background Images

CSS gradient functions like linear-gradient() and radial-gradient() are valid background-image values, not separate properties -- meaning a gradient can be layered with a photo using the same comma-separated stacking, commonly used to darken part of a photo for readable text overlay.

Example: Gradients as Background Images

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 darkens the photo underneath for readable text</div>

When Background Images Fail

If a background image fails to load, the element simply falls back to showing its background-color (or transparent, if none is set) with no broken-image icon, unlike a broken <img>. This graceful degradation is one reason background images are preferred for purely decorative imagery.

Example: When Background Images Fail

css

<style>
.box {
  background-color: #ccc;
  background-image: url('missing-image.jpg');
  height: 150px;
}
</style>
<div class="box">Falls back to the background-color, no broken icon</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Color Next Lesson → CSS Background Repeat