background-image
The background-image property sets one or more images or gradients as an element's background layers.
Syntax
background-image: <image>...; /* url() or gradient */
Examples
.panel {
background-image:
radial-gradient(circle at top, #fff3, transparent),
url('/texture.png');
background-size: cover;
}
Output
Renders a textured panel with a soft radial highlight layered on top.
Notes
Comma-separated layers stack with the first on top. Accepts url(), linear-gradient(), radial-gradient(), conic-gradient(), and image-set(). Pair with background-color as a fallback.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |