Background Image

The background-image property renders one or more images (or gradients) behind an element's content. Unlike an <img> tag, background images are decorative and invisible to screen readers.

URL Images

background-image: url("photo.jpg") loads a raster or vector image. Relative paths resolve from the CSS file location, not the HTML file.

Gradient Images

CSS provides linear-gradient(), radial-gradient(), and conic-gradient() — all treated as image values and compositable with other backgrounds.

Layering

Multiple values separated by commas stack images — the first value is the topmost layer, with background-color always at the bottom.

Example

/* Simple URL image */
.hero {
    background-image: url("/images/hero.webp");
    background-color: #1a237e; /* fallback colour */
    min-height: 60vh;
}

/* Linear gradient */
.banner {
    background-image: linear-gradient(
        to bottom right,
        #1a73e8 0%,
        #0d47a1 100%
    );
}

/* Radial gradient — spotlight effect */
.spotlight {
    background-image: radial-gradient(
        circle at 30% 40%,
        rgba(255,255,255,0.25) 0%,
        transparent 60%
    );
}

/* Conic gradient — pie chart slice */
.pie {
    background-image: conic-gradient(
        #4caf50 0% 40%,
        #2196f3 40% 70%,
        #ff5722 70% 100%
    );
    border-radius: 50%;
    width: 120px; height: 120px;
}

CSS

Full Editor

Pro Tip

Use background-image only for decorative visuals. If the image conveys meaning (like a product photo or an infographic), use an <img> tag with a descriptive alt attribute instead.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned