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:
- Entire page (body)
- Sections (div)
- Headers
You can also control how the image behaves using additional background properties.
selector {
background-image: url("image.jpg");
}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; |
Example
<!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>Output
Browser Output
The page will display a full-screen background image
The image will not repeat
The image will be centered and cover the entire screen
Text will appear on top of the image
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
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.