HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Colors and Backgrounds

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:

  • 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

PropertyDescriptionExample
background-imageSets background imagebackground-image: url("img.jpg");
background-repeatControls image repetitionbackground-repeat: no-repeat;
background-sizeDefines image sizebackground-size: cover;
background-positionSets image positionbackground-position: center;
background-attachmentDefines scrolling behaviorbackground-attachment: fixed;

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>

Output

Browser Output

css

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.

PreviousCSS Background ColorNextCSS Margin