How to Add a Background Image in CSS: A Complete Guide

Adding a background image in CSS is one of the most commonly used styling techniques in web development. Whether you're building a full-page hero section, a styled card component, or a textured UI element, CSS gives you precise control over how background images behave — and getting the details right makes a significant difference in how professional the result looks.

The Core Property: background-image

The foundational CSS property is straightforward:

element { background-image: url('path/to/your-image.jpg'); } 

The url() value accepts relative paths, absolute paths, or full URLs. For example:

/* Relative path */ body { background-image: url('images/hero.jpg'); } /* Absolute URL */ body { background-image: url('https://example.com/images/hero.jpg'); } 

This alone places the image, but without supporting properties, it will tile repeatedly across the element — which is rarely what you want for a full background.

Essential Supporting Properties

The background-image property almost always works alongside a set of companion properties that control how the image is displayed.

background-size

This controls how the image scales within its container. The two most important values are:

• cover — scales the image to cover the entire element, cropping if necessary. This is the most common choice for hero sections and full-page backgrounds.
• contain — scales the image so it fits entirely within the element without cropping.
• Explicit dimensions like 100% 100% or 400px 300px give you manual control.

body { background-image: url('hero.jpg'); background-size: cover; } 

background-repeat

By default, CSS tiles background images. To prevent this:

background-repeat: no-repeat; 

Other values include repeat-x (horizontal only), repeat-y (vertical only), and space or round for controlled tiling patterns.

background-position

Controls where the image is anchored within the element:

background-position: center center; 

You can use keyword pairs (top left, bottom right, center center), percentage values, or pixel offsets. Combined with cover, center center is the go-to default for keeping the most visually important part of an image visible.

background-attachment

This determines whether the image scrolls with the page or stays fixed:

• scroll (default) — the image moves with the element as the user scrolls.
• fixed — the image stays in place relative to the viewport, creating a parallax-like effect.
• local — the image scrolls with the element's own content.

background-attachment: fixed; 

⚠️ Note: background-attachment: fixed can cause performance issues on mobile devices and is not supported consistently across all mobile browsers.

The Shorthand Approach

CSS allows you to combine all background properties into a single background shorthand declaration:

body { background: url('hero.jpg') no-repeat center center / cover; } 

The / separates background-position from background-size in shorthand syntax. This approach keeps your CSS clean, though some developers prefer the individual properties for readability when working on larger codebases.

Layering Multiple Backgrounds

Modern CSS supports multiple background images on a single element, listed as comma-separated values:

div { background-image: url('overlay.png'), url('hero.jpg'); background-size: cover, cover; background-position: center, center; } 

The first image in the list sits on top. This technique is useful for adding semi-transparent overlays, texture layers, or gradient-image combinations without adding extra HTML elements.

Combining Backgrounds with Gradients 🎨

CSS gradients count as background images, so you can blend them with photo backgrounds:

.hero { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg'); background-size: cover; background-position: center; } 

This darkens the image with a semi-transparent overlay — a common technique for improving text legibility on photo backgrounds.

Key Comparison: Common Background Configurations

Responsive Considerations

Background images don't load through <img> tags, so they aren't natively responsive in the same way. A few things affect how they behave on different screen sizes:

• background-size: cover adapts automatically to the container size, but you may lose parts of the image on smaller screens depending on the aspect ratio.
• Media queries let you swap background images entirely for different viewports — useful for serving smaller image files to mobile users.
• CSS custom properties (variables) can make it easier to manage multiple background image references across breakpoints.

@media (max-width: 768px) { .hero { background-image: url('hero-mobile.jpg'); } } 

Accessibility and Performance Factors

Because CSS background images are not part of the document structure, screen readers ignore them entirely. This makes them appropriate for decorative images, but not for images that carry meaning or information — those belong in HTML <img> tags with descriptive alt attributes.

On the performance side, large background images are a common cause of slow page loads. File format, compression level, and whether the image is served via a CDN all influence load time. The browser will still download the background image even if the element is hidden with display: none in some cases, depending on how the stylesheet is structured.

Variables That Shape the Right Approach

How you implement a CSS background image depends heavily on factors specific to your project:

• The element's size and aspect ratio — a fixed-size card behaves differently from a fluid full-viewport section
• How much of the image must remain visible — cover crops; contain doesn't
• Whether the background is decorative or structural — affects property choices and accessibility approach
• Target devices — mobile browsers handle background-attachment: fixed inconsistently
• Performance budget — high-resolution images need compression or format optimization depending on your audience and hosting setup

The same CSS technique that works perfectly for a desktop hero layout may behave unexpectedly in a mobile-first component, or perform poorly when the image file hasn't been optimized for the web. What works well in practice depends on the specific combination of layout, image content, and the environment where the page will be used.