CSS Colors and Backgrounds
CSS Background Image
Add image and gradient backgrounds, control their source and fallback color, and keep decorative images separate from meaningful content.
The CSS Background Image property is used to set an image as the background of an HTML element.
It allows you to enhance the visual design of a webpage by adding images behind content such as: The supporting concepts are explained in CSS Background Color and Layered Backgrounds.
- Entire page (body)
- Sections (div)
- Headers
You can also control how the image behaves using additional background properties.
Syntax
css
selector {
background-image: url("image.jpg");
}Example
css
body {
background-image: url("background.jpg");
}👉 This sets an image as the background of the page.
Attributes
| Property | Description | Example |
|---|---|---|
| background-image | Sets background image | background-image: url("img.jpg"); |
| background-repeat | Controls image repetition | background-repeat: no-repeat; |
| background-size | Defines image size | background-size: cover; |
| background-position | Sets image position | background-position: center; |
| background-attachment | Defines scrolling behavior | background-attachment: fixed; |
Decorative and meaningful images
A CSS background image is decorative and is not announced as document content. If an image communicates information, place it in HTML with suitable alternative text instead. Background images also need a fallback color for loading failures and contrast. Control repetition, position, size, origin, and clipping explicitly when the default tiling behavior would produce an incorrect result.
Example
Complete CSS Example for Background Image
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Image</title>
<style>
body {
background-image: url("https://picsum.photos/500/500?grayscale");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
h1 {
color: white;
text-align: center;
}
p {
color: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1>Background Image Example</h1>
<p>This page uses a background image.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| background-image | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Always use
url()to define the image path - Use
background-size: coverfor full-screen effect - Use
no-repeatto prevent image repetition - Ensure text is readable over the background image
- Optimize images for faster page loading
Conclusion
CSS Background Image allows you to create visually rich and engaging web pages. By combining it with other background properties, you can control how images appear and behave, resulting in professional and modern designs.