color-background
background-image
Sets one or more background images on an element, including URL images and CSS gradients. Multiple layers stack in the order given, with the first painted on top.
background-image: none | <image> [, <image>]*Common values
| Value | Effect |
|---|---|
| none | Removes any background image |
| url('/img.png') | Loads a bitmap or SVG image |
| linear-gradient(...) | Two-stop or multi-stop gradient |
| radial-gradient(...) | Circular or elliptical gradient |
| conic-gradient(...) | Sweep gradient for charts or rings |
Examples
.hero { background-image: linear-gradient(180deg, rgb(0 0 0 / .6), transparent), url('/hero.jpg'); }Overlay gradient on top of a photo
.dot { background-image: radial-gradient(circle at 30% 30%, #fff, #0ea5e9); }Spherical highlight effect
.chart { background-image: conic-gradient(#22c55e 0 40%, #e5e7eb 0); }Simple pie-style progress ring
Gotcha
Multiple images stack front-to-back; the first listed layer paints on top of subsequent layers.
Related properties
background
Shorthand for all background-* properties, letting you set color, image, position, size, and repeat in one declaration. Resets any background properties you do not specify to their initial values.
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).
color
Sets the foreground text color and inherits by default. Modern browsers support oklch() and color(display-p3) for wider-gamut design systems.
border-radius
Rounds the corners of an element's border box. Values can be lengths or percentages, and the slash syntax lets you set different horizontal and vertical radii for elliptical corners.