Background Image Property
Last updated: 2026-09-13
background-image Background Image Property
background-image sets one or more background images on an element, supporting url() paths and gradient functions. Multiple backgrounds are comma-separated, with earlier images layered on top. It is usually used together with background-size and background-position.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
background-image: none | <image> | linear-gradient() | radial-gradient();⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No background image |
<image> | Type | url() image or gradient |
linear-gradient() | radial-gradient() | Function | Linear or radial gradient |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-image | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： You can combine a background image with a background color; the image renders above the color, and the color shows through the image's transparent areas.
Tip： Images generated by gradient functions (linear-gradient, radial-gradient) also count as background images.
❓ FAQ
QHow do I stack multiple background images?
ASeparate the images with commas, e.g. background-image: url(a.png), url(b.png), linear-gradient(...); — the first one is on top. Each layer can be controlled independently with background-size and background-position, using comma-separated values that correspond one-to-one with the layers.
QWhat happens when a background image fails to load?
AIf a background-color is also set, the color shows as a fallback when the image fails (wrong path, blocked, or unsupported format); otherwise the background renders transparent. Keep in mind background-image has no alt text — purely decorative background images must not carry critical information. Use <img> with a text alternative for meaningful content.
QWhat is the difference between background-image and the <img> tag?
Abackground-image is part of CSS presentation: it is not in the document flow, is not indexed by search engines, has no alt semantics, and can be cropped and positioned freely — fine for decorative backgrounds. <img> is HTML content: it has alt text, can be indexed and selected, and is meant for meaningful content. When loading fails, <img> falls back to its alt, while a background image simply disappears.
QHow do I write background gradients?
AGradients are background images. linear-gradient(135deg, #667eea, #764ba2) transitions along a 135-degree angle; radial-gradient(circle, #fff, #333) spreads outward from the center. Stack several layers for more complex effects, and keep a solid background-color as a fallback.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
