A hero photo behind a section, a subtle texture behind a form, a repeating pattern in a footer: in all three cases the image has nothing to say on its own, it is pure decoration. That is exactly what background-image is for.
Unlike an <img> tag, an image placed with this property is not part of the page's content: it never grows the element's size, and it carries no alternative text, since it is not meant to convey information.
Definition
background-image places an image, or a gradient, behind an element's content and behind its optional background-color. Its default value is none: without a declaration, no image shows up. The most common syntax uses url() with the file's path.
.hero {
background-image: url("/images/landscape.jpg");
background-size: cover;
}An image, or a gradient
background-image is not limited to image files: a CSS gradient is also a valid value for this property. There is no separate property reserved for gradients: linear-gradient() and radial-gradient() are declared in exactly the same place as a url().
.gradient-card {
background-image: linear-gradient(135deg, #6366f1, #ec4899);
}Several layered images
background-image accepts a comma-separated list of values, and stacks them in the order they are written: the first one declared shows on top, the last one underneath. This is the most common technique for laying a dark gradient veil over a photo without touching the image file itself.
.readable-hero {
background-image:
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent),
url("/images/landscape.jpg");
background-size: cover;
}background-repeat or background-size declared, an image displays at its real size and tiles to fill the element. An image that looks tiny and repeated is almost never corrupted: it is the default behavior, fixed with the background shorthand.background-image or <img>?
The question comes up as soon as an image appears in a design. If it carries information the user needs to understand, like a profile photo or an article's illustration, it belongs to the content and should go through <img>, with alternative text. If it is purely decorative, like a background texture or a repeating pattern, background-image is the right tool: it disappears cleanly for screen readers, which is exactly the desired behavior for plain decoration. For a content image displayed as a cover, also compare with object-fit, the equivalent of background-size built for <img> and <video>.
Optimizing the weight of a background image
A heavy background image slows down the page's first paint, often more than an equivalent-sized file loaded as an <img>, since the browser cannot apply native lazy loading or a priority hint to it. Compressing the image, serving it in a modern format like WebP or AVIF, and capping its resolution to what is actually displayed on screen remain the most effective levers. On a full-screen section, a poorly optimized background image can, on its own, double the perceived load time of the entire page, well before the rest of the content comes into play.
Frequently asked questions
The most common cause is a wrong path: inside a CSS file, url() is resolved relative to the CSS file's own location, not to the HTML page that uses it. An absolute path starting with a slash, like /images/landscape.jpg, avoids this trap in the vast majority of projects.
background-image change be animated?Not with a plain transition: the browser has no way to interpolate progressively between two images. The effect is simulated by stacking two layers with opacity, or by swapping the property outright, with no smooth transition between the two visuals.
background-image be used for a user's profile picture?No, that is exactly the case where <img> is the right choice: that photo carries information, who this person is, it needs to stay accessible with alternative text, and it deserves to show up even if the stylesheets fail to load properly.