CSS Background Images
The CSS background-image property displays one or more images behind an element's content.
Background images are commonly used for decorative photographs, textures, patterns, illustrations, and other visual effects that do not need to be part of the HTML content. CSS provides additional background properties for controlling how these images repeat, where they are positioned, and how they are sized.
Adding a Background Image
The background-image property can use the CSS url() function to specify an image file.
.box {
background-image: url("images/landscape-1200x800.jpg");
}The image is painted behind the element's content. The dimensions of the element determine the area in which the background is displayed, but the background image itself does not determine the element's width or height.
If an element has no content, padding, width, height, or other dimensions that create visible space, assigning a background image alone does not necessarily make the element visible.
Background Image URLs
The path inside url() tells the browser where to find the background image.
.box {
background-image: url("images/leaves-400x400.png");
}A relative URL is resolved relative to the stylesheet containing the declaration. When CSS is written inside a <style> element, the relative URL is resolved from the HTML document's location.
Keeping related images in an organized folder makes paths easier to understand and maintain.
Default Background Image Behavior
When only background-image is specified, the browser uses the default values of the other background properties.
.box {
background-image: url("images/pattern-200x200.png");
}By default, a background image begins at the top left of its background positioning area, is displayed at its natural size unless sizing rules affect it, and repeats horizontally and vertically when necessary to fill the background area.
This default repeating behavior works particularly well with small seamless patterns such as our pattern-200x200.png image.
Transparent Background Images
Background images can contain transparent or partially transparent areas. PNG images are commonly used when transparency is needed.
.box {
background-color: lightblue;
background-image: url("images/leaves-400x400.png");
}Our autumn leaves image has a transparent background. The leaves are painted over the element's background color, while the background color remains visible through the transparent portions of the image.
This makes transparent images especially useful for decorative graphics and layered backgrounds.
Background Color and Images
A background color can be specified together with a background image.
.box {
background-color: lightblue;
background-image: url("images/landscape-1200x800.jpg");
}The image is painted over the background color. The color can remain visible through transparent portions of an image and can provide a useful fallback if the image is unavailable or has not finished loading.
When choosing a fallback background color, consider whether text placed inside the element will remain readable both with and without the background image.
Multiple Background Images
The background-image property can contain multiple images separated by commas.
.box {
background-image:
url("images/leaves-400x400.png"),
url("images/landscape-1200x800.jpg");
}The first image is the topmost background layer. Each additional image is painted behind the layer before it.
Because our leaves image contains transparency, the landscape can remain visible through its transparent areas. Other background properties can then control the position, size, and repetition of each layer separately.
Background Images and Content
CSS background images are best suited to decorative or presentational graphics. They are not represented as normal document content and do not provide an HTML alt attribute.
If an image communicates information that users need in order to understand the page, an HTML <img> element with appropriate alternative text is usually the better choice.
Background images should also be chosen carefully when text is displayed over them. Busy photographs or patterns can make text difficult to read unless sufficient contrast is maintained.
Background Image Example
The following example uses our transparent autumn leaves image over a light blue background.
.box {
background-color: lightblue;
background-image: url("images/leaves-400x400.png");
background-repeat: no-repeat;
}The background-repeat: no-repeat declaration prevents the image from being tiled so the individual leaves graphic is easy to see. Open the example in the editor and remove that declaration to see the browser's default repeating behavior.