Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Colors and Backgrounds

CSS Background Image

Written by Updated

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

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;

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-image11211

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: 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 ColorNextLayered Backgrounds