background-image

Definition

The background-image property sets one or more background images for an element.

Syntax

.hero {
  background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 64, 175, 0.6)),
    url("/images/sky.jpg");
}

Values

url("…"): reference raster or vector assets.
linear-gradient() / radial-gradient() / conic-gradient(): pure CSS art without network requests.
image-set(): serve resolution-aware or format-specific sources.
Multiple images comma separated; the first value is painted on top.

Practical Examples

.card {
  background-image: url("https://images.unsplash.com/photo-1527254059249-f2b97f8d041e?auto=format&fit=crop&w=800&q=80");
}

.card--gradient {
  background-image: linear-gradient(120deg, #0ea5e9, #6366f1);
}

Gradients provide lightweight theming layers while bitmap images cover hero or card art.

HTML

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="h-36 rounded-xl border border-slate-200" style="background-image: linear-gradient(135deg, #0ea5e9, #6366f1);"></div>
  <div class="h-36 rounded-xl border border-slate-200" style="background-image: url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center;"></div>
</div>

Tips & Best Practices

Provide solid color fallbacks before external image URLs load.
Use image-set() to serve AVIF/WebP assets with graceful fallbacks.
Combine gradients and photos to improve text contrast without editing assets.

Accessibility & UX Notes

Avoid embedding meaningful text in background images—screen readers ignore them. Provide alternative content via HTML.

Browser Support

All major browsers support gradients and multiple background images; image-set() needs modern engines (Chromium, Safari 12+, Firefox 88+).

background-size, background-position, and background-repeat for precise placement.
object-fit for similar control on <img> elements.
filter to adjust background imagery without editing files.