How to Add a Background Image in HTML

The simplest way: the CSS background-image property

To add a background image to a webpage, you write a single line of CSS inside a style tag in your HTML document. The most direct method uses the background-image property and points to the image file you want to display.

Here is the actual code you write. Place this between the <head> and </head> tags of your HTML document:

<style> body { background-image: url('image.jpg'); } </style>

Replace 'image.jpg' with the actual filename of your image. If the image is in the same folder as your HTML file, this is all you need. The background will cover the entire page behind all your text and other content.

Key Takeaways

The background-image property in CSS is the standard way to add a background image, and it goes inside a style tag in your HTML head section.
The image file must either be in the same folder as your HTML file, or you must provide the full path or web address where it lives.
By default, a background image repeats (tiles) across the page — use background-repeat: no-repeat to stop this.
Background images load after text and other content, so if your image is large or slow to load, visitors will see unstyled content first.
You can control the size, position, and behavior of the background image with additional CSS properties like background-size and background-position.

Pointing to an image in a different folder

If your image is not in the same folder as your HTML file, you need to tell the browser where to find it. This is called a file path.

If your image is in a subfolder called images, write:

background-image: url('images/image.jpg');

If your image is on the web at a specific address, use the full web address:

background-image: url('https://example.com/images/image.jpg');

The browser will fetch the image from that address every time someone loads your page. This works, but it means your page depends on that website staying online and the image staying in that exact location.

Stopping the image from repeating

By default, a background image tiles — it repeats over and over to fill the entire page. If your image is small, you will see it repeated many times. To display it only once, add the background-repeat property:

<style> body { background-image: url('image.jpg'); background-repeat: no-repeat; } </style>

You can also use background-repeat: repeat-x to tile only horizontally, or background-repeat: repeat-y to tile only vertically. The default is repeat, which tiles in both directions.

Sizing and positioning the background image

Once you stop the image from repeating, you usually want to control how large it appears and where it sits on the page. The background-size property handles this.

To make the image cover the entire page and stretch to fit:

background-size: cover;

To make the image fit entirely within the page without stretching or cropping:

background-size: contain;

You can also set a specific width and height. This example makes the image 500 pixels wide and 300 pixels tall:

background-size: 500px 300px;

To position the image, use background-position. This example centers it:

background-position: center;

You can also use top, bottom, left, right, or specific pixel measurements like 50px 100px (50 pixels from the left, 100 pixels from the top).

Making the background stay in place when scrolling

Normally, when a visitor scrolls down your page, the background image scrolls with the text. To keep the background fixed in place while content scrolls over it, use background-attachment:

<style> body { background-image: url('image.jpg'); background-attachment: fixed; background-size: cover; } </style>

This creates a parallax effect that many websites use for visual interest. The background stays still while the page content moves across it.

A complete example with all the pieces

Here is a full HTML document with a background image that covers the page, does not repeat, stays fixed while you scroll, and has readable text on top:

<!DOCTYPE html> <html> <head> <style> body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; color: white; font-family: Arial, sans-serif; } </style> </head> <body> <h1>Welcome to My Page</h1> <p>This text appears on top of the background image.</p> </body> </html>

This code assumes the file background.jpg is in the same folder as your HTML file. The text color is set to white so it shows up against most background images. Adjust the color, font, and other properties to match your design.

Frequently Asked Questions

What image formats work for background images?

JPG, PNG, GIF, WebP, and SVG all work. JPG is best for photographs because it keeps file size small. PNG is best for images with transparent areas. WebP is newer and smaller than JPG but does not work in older browsers. Test your image in the browsers your visitors use.

Why is my background image not showing up?

The most common reason is an incorrect file path. Check that the filename is spelled exactly right, including capital letters, and that the file is actually in the folder you specified. Open your browser's developer tools (usually F12), go to the Console tab, and look for error messages about the image failing to load.

Can I use a background image on just one part of the page instead of the whole page?

Yes. Instead of putting the background-image on the body, put it on a specific element like a div or a section. For example, background-image: url('image.jpg'); inside a .header class will only show the image behind that section, not the whole page.

How do I make text readable when it sits on top of a background image?

Add a semi-transparent overlay between the image and the text using a pseudo-element, or use a dark text shadow. You can also add a background color to your text container so it does not sit directly on the image. Test with real visitors to make sure they can read everything.

Does using a background image slow down my page?

Large image files do slow down page load time. Compress your image before uploading it, use modern formats like WebP, and consider whether a background image is necessary for your design. A slow page frustrates visitors and ranks lower in search results.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.