Quick answer

Step 1: Add a background image to the whole page

Background images are set with CSS, not with an HTML tag. To put one behind the entire page, add the background-image property to the body selector:

1. Put your image file next to your HTML file (or use a full web address).
2. Inside a <style> block, write body { background-image: url("photo.jpg"); }. The text inside url() is the path to the image.
3. Add background-size: cover and background-position: center so the picture fills the screen without stretching.

The examples on this page use free placeholder photos from picsum.photos so they work right away. Swap in your own image path.

Always set a background-color as well. It shows while the image downloads, and if the image ever fails to load, the text on top stays readable.

Step 2: Get the image path right

Most “my background image doesn’t show” problems are a wrong path. The path in url() is relative to the CSS file, or to the HTML file when the CSS sits in a <style> tag:

• url("photo.jpg"): the image is in the same folder.
• url("images/photo.jpg"): the image is in a folder called images next to the file.
• url("../images/photo.jpg"): go up one folder first (common when the CSS lives in a css/ folder).
• url("https://example.com/photo.jpg"): a full web address works from anywhere.

File names are case-sensitive on most web servers, so Photo.JPG and photo.jpg are different files.

Step 3: Add a background image to a div (hero section)

You can put a background image on any element, not just the page. A common pattern is a “hero” banner at the top of a page. The one thing to remember is that a div with only a background image has no height, because background images don’t take up space. Give it a min-height, or put content inside it.

To make the text easy to read on any photo, layer a semi-transparent gradient over the image. background-image accepts several layers separated by commas, and the first one is drawn on top.

Step 4: Control repeating, size and position

By default a small background image repeats (tiles) to fill the space. That’s useful for patterns and textures, and unwanted for photos. Four properties control it:

• background-repeat: no-repeat, repeat (default), repeat-x (one row) or repeat-y (one column).
• background-size: cover, contain, auto or exact sizes like 200px.
• background-position: center, top, right bottom, or percentages like 50% 20%.
• background-attachment: fixed: the image stays still while the page scrolls (a simple parallax effect; most mobile browsers ignore it).

The example tiles a small pattern. Change repeat to no-repeat to see the difference.

The background shorthand

All of those properties can be written in one line with the background shorthand. The size has to come right after the position, separated by a slash:

That single line sets the fallback color, the image, the position, the size and the repeat. The shorthand resets any background property you leave out, so put it before other background-* rules, not after them.

Responsive background images for phones

A 2000-pixel-wide photo is wasted on a 400-pixel phone screen, and it costs your visitors data and time. Two CSS tools let the browser download a smaller file when it can:

• A media query. Set the large image by default, then swap in a smaller one for narrow screens: @media (max-width: 600px) { .hero { background-image: url("hero-small.jpg"); } }. The browser only downloads the image that applies.
• image-set(). Offer the same picture at different resolutions and let the browser choose: background-image: image-set(url("hero.jpg") 1x, url("hero@2x.jpg") 2x);. High-density screens get the sharper file; others get the lighter one.

Also check how the photo crops. With background-size: cover, a wide banner on a tall phone screen only shows the middle strip of the picture. Change background-position (for example 30% center) inside the media query to keep the important part, such as a face, in view.

background-size values compared

Common mistakes with background images

• Using the HTML background attribute. <body background="photo.jpg"> is obsolete in HTML5. Use CSS.
• A wrong path. Check the folder, the spelling and the capital letters. Open the image address directly in the browser to test it.
• An empty div. Background images add no height. Set min-height or add content.
• Unreadable text. Add a dark gradient overlay or a text shadow, and set a background-color fallback.
• Huge image files. A 5 MB photo slows the page down. Resize it to about 1600–2000 pixels wide and compress it (WebP or quality-80 JPEG).
• Important images as backgrounds. Background images have no alt text, so screen readers and search engines can’t see them. If the image is content, use an <img> tag instead.

Related HTML tags

Frequently asked questions