Tutorial Article

CSS Background Image

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: You can also control how the image behaves using additional background properties. 👉 This sets an image as the […]

Apr 1, 2026CSSCSS Colors & BackgroundsTutorials

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.

Syntax

selector {
    background-image: url("image.jpg");
}

Example

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

Complete CSS Example for Background Image

<!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: cover for full-screen effect
Use no-repeat to 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.