How to Add a Background Image to an HTML Page

The simplest way: the CSS background-image property

To add a background image to an HTML page, you write a single line of CSS inside a style tag in your HTML document. The most direct method uses the background-image property, which tells the browser which image file to display behind your content.

Open your HTML file in a text editor. Inside the <head> section (the part between <head> and </head>), add a <style> tag. Inside that tag, write a rule for the body element — the body is the entire visible page. Here is the actual code:

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

Replace 'image.jpg' with the actual filename of your image. The image file must be in the same folder as your HTML file, or you must write the correct path to it. Save your HTML file and open it in a browser — the image should now appear behind all your text and other content.

Key Takeaways

The background-image property in CSS is the standard way to add an image behind your page content.
Your image file must either be in the same folder as your HTML file, or you must provide the correct path to where it is stored.
By default, a background image repeats (tiles) across the page — use background-repeat: no-repeat to show it only once.
Background images can make text hard to read, so use background-size and background-position to control how the image displays.
The background-attachment property lets you keep the image fixed while the page scrolls, creating a parallax effect.

Controlling how the image repeats and sizes

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 stop this, add the background-repeat property set to no-repeat:

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

To make the image stretch or shrink to fit the page, use background-size. The value cover stretches the image to fill the entire page while keeping its original proportions — some of the image may be cut off at the edges. The value contain shrinks or stretches the image to fit entirely on the page without cutting anything off, but you may see empty space around it:

background-size: cover;

You can also use a specific width and height, like background-size: 400px 300px; or a percentage like background-size: 100% 100%; to stretch the image to fill the page exactly.

Positioning the image on the page

By default, a background image starts in the top-left corner. Use the background-position property to move it. You can use keywords like center, top, bottom, left, and right, or exact measurements in pixels or percentages:

background-position: center; — centers the image both horizontally and vertically background-position: top center; — places it at the top, centered left to right background-position: 50px 100px; — places it 50 pixels from the left and 100 pixels from the top

These properties work together. A complete example that centers a non-repeating image and stretches it to cover the page looks like this:

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

Using the background shorthand property

Instead of writing each property separately, you can write them all in one line using the background shorthand property. The order matters: image, repeat, position, size. Here is the same example written as a shorthand:

background: url('image.jpg') no-repeat center / cover;

Notice the forward slash before cover — that separates the position from the size. This shorthand does the same thing as writing four separate lines, but it is faster to type once you understand the order.

Making the image stay fixed while the page scrolls

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

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

This creates a parallax effect — the image appears to stay still while text and other elements move across it. This technique is popular on modern websites because it creates visual depth and makes the page feel more interactive.

Ensuring text remains readable over the image

A background image can make text hard to read if the image is too bright or too detailed. You have several options to fix this. The simplest is to add a semi-transparent overlay — a colored layer that sits between the image and your text. Use background-color with transparency, or layer multiple backgrounds:

<style> body { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg'); background-size: cover; } </style>

This code adds a semi-transparent black layer on top of the image. The four numbers in rgba(0, 0, 0, 0.5) are red, green, blue, and alpha (transparency). The 0.5 means 50 percent opaque — adjust it to make the overlay darker or lighter. You can also use a color like rgba(255, 255, 255, 0.3) for a white overlay, or any other color you need.

Another approach is to add a text shadow or background color to your text elements themselves, so they stand out against the image regardless of what is behind them.

Troubleshooting common problems

If your background image does not appear, the most common reason is that the browser cannot find the file. Check that the filename in your CSS exactly matches the actual filename — including capitalization and the file extension. If your image is in a subfolder, you must include that path: url('images/image.jpg') instead of just url('image.jpg').

If the image appears but looks stretched or distorted, adjust the background-size property. Use contain instead of cover, or specify exact dimensions. If the image repeats when you do not want it to, add background-repeat: no-repeat;.

If your page loads slowly, the background image may be too large in file size. Use an image editor or an online tool to compress the image before adding it to your page. A background image should usually be under 500 kilobytes.

Frequently Asked Questions

Can I use a background image from the internet instead of a file on my computer?

Yes. Instead of a filename, use the full web address: background-image: url('https://example.com/image.jpg'); However, if that website goes down or removes the image, your background will disappear. It is safer to read the image and store it with your HTML file.

What image formats work for background images?

JPG, PNG, GIF, WebP, and SVG all work. JPG is best for photographs because it compresses well. PNG is best for images with transparent areas or sharp edges. WebP is newer and creates smaller files, but older browsers may not support it.

How do I add a background image to just one section of the page instead of the whole page?

Use a div or other HTML element instead of the body. Give that element a class name, then write CSS for that class: .my-section { background-image: url('image.jpg'); } The background will only appear inside that element.

Can I use multiple background images on the same page?

Yes. You can separate multiple images with a comma: background-image: url('image1.jpg'), url('image2.jpg'); The first image appears on top, and the second appears behind it. This is useful for layering effects.

Why does my background image look blurry on high-resolution screens?

The image may be too small for the screen size. Create a larger version of the image (at least 1920 pixels wide for modern screens) or use a vector format like SVG, which scales without losing quality.

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.