color-background
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.
background: <color> || <image> || <position> / <size> || <repeat> || <origin> || <clip> || <attachment>Common values
| Value | Effect |
|---|---|
| transparent | No background color |
| #fff | Solid white background |
| linear-gradient(...) | Gradient as an image layer |
| url(...) center/cover no-repeat | Image sized to cover, centered, no tiling |
| none | Removes background image, keeps color |
Examples
.hero { background: url('/hero.jpg') center/cover no-repeat; }Full-bleed hero image
.card { background: #fff; }Solid white card surface
.btn { background: linear-gradient(135deg, #4f46e5, #7c3aed); }Diagonal gradient button
Gotcha
The shorthand resets background-color and background-image; use longhand when layering multiple backgrounds.
Related properties
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.
color
Sets the foreground text color and inherits by default. Modern browsers support oklch() and color(display-p3) for wider-gamut design systems.
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).
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.