The background-image property sets one or more background images for a box. Multiple comma-separated images are layered, with the first painted on top. Valid values are <image> (URL, gradient, etc.) or none for an empty layer..hero {
background-image: url('hero.jpg');
}.stacked {
background-image:
linear-gradient(180deg, rgb(0 0 0 / 0.6), transparent),
url('photo.jpg');
}noneNo image for this layer — it still counts as a layer, but nothing is drawn.url()Points to an image resource by address. Syntax: url("path/to/image.png").linear-gradient()Linear color gradient along an axis.radial-gradient()Radial color gradient around a center point.conic-gradient()Conic color gradient (rotating around a point).repeating-linear-gradient()Repeating linear gradient.repeating-radial-gradient()Repeating radial gradient.repeating-conic-gradient()Repeating conic gradient.image-set()Selects an image from a set based on resolution/format.cross-fade()Cross-fades two images by a given percentage.CSS Backgrounds Module Level 4First Public Working Draft<image>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
