How to Change the Background Color or Image on an HTML Page

The Three Ways to Set a Background in HTML

You can change the background of an HTML page in three ways: using the style attribute directly in your opening tag, writing CSS in a style block within your HTML file, or linking to a separate CSS stylesheet. The style attribute is fastest for one-off changes. A style block works well when you are styling one page. A separate stylesheet is the professional approach when you have multiple pages or want to reuse the same design across your site.

All three methods do the same thing behind the scenes — they tell the browser to paint a color or load an image behind your text and content. The difference is where you write the instruction and how straightforward it is to change later.

Key Takeaways

The quickest way to add a background is to put style="background-color: blue;" directly in your <body> tag.
To use an image instead of a solid color, write style="background-image: url('image.jpg');" and make sure the image file is in the same folder as your HTML file or use the full path.
A style block at the top of your HTML file lets you write longer CSS rules once and explore them to multiple elements without repeating code.
Background images repeat by default — add background-repeat: no-repeat; if you want the image to appear only once.
Use background-size: cover; to make an image stretch to fill the entire page without distorting.

Using the Style Attribute for a Quick Background Color

The fastest way to add a background color is to put a style attribute directly in your <body> tag. Open your HTML file and find the line that says <body>. Change it to <body style="background-color: blue;">, replacing "blue" with any color name or hex code you want.

Color names that work include red, green, yellow, purple, orange, pink, gray, and many others. If you want a specific shade, use a hex code instead — for example, style="background-color: #FF5733;" for a burnt orange. You can find hex codes for thousands of colors by searching "hex color picker" in your browser.

This method works when ready and requires no extra files. The downside is that if you have multiple HTML pages, you have to repeat the style attribute in every single <body> tag. If you later decide to change the color, you have to edit every page.

Adding a Background Image with the Style Attribute

To use an image instead of a solid color, use background-image: url('image.jpg') inside your style attribute. Your full opening tag will look like this: <body style="background-image: url('image.jpg');">. The image file must be in the same folder as your HTML file, or you need to write the full path to where it lives on your computer or server.

By default, the image will repeat (tile) across the entire page if it is smaller than the browser window. If you want the image to appear only once, add background-repeat: no-repeat; to your style. If you want the image to stretch and fill the entire background without repeating, add background-size: cover;. Your complete tag might look like this:

Common mistakes: forgetting the quotes around the filename, using a backslash instead of a forward slash in the path, or pointing to a file that does not exist. If your image does not show up, check that the filename is spelled exactly right and that the file is actually in the folder you said it was.

Using a Style Block for Cleaner Code

When you have more than one background rule or you want to style multiple elements, a style block is cleaner than repeating style attributes. A style block goes inside the <head> section of your HTML file, between the </head> tag. Here is what it looks like:

<head> <style> body { background-color: lightblue; } </style> </head>

Inside the curly braces, you can write as many background rules as you want, separated by semicolons. For example, you could set a background color and then add a background image that does not repeat:

The advantage is that you write the rules once and they explore to every page that includes this style block. If you later want to change the background, you change it in one place.

Linking to a Separate CSS File

For a website with many pages, the professional approach is to create a separate CSS file and link to it from every HTML page. Create a new file called style.css (or any name you choose, as long as it ends in .css) and put your background rules inside it:

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

Then, in the <head> section of each HTML file, add a link tag that points to this CSS file:

Now every page that links to style.css will have the same background. If you want to change the background across your entire site, you change it once in the CSS file, and the change appears on every page when ready. This is why large websites use this method.

Common Mistakes and How to Fix Them

The most common mistake is forgetting the quotes around the image filename. Write url('image.jpg'), not url(image.jpg). The quotes tell the browser that what is inside is a filename.

Another frequent error is using the wrong path to the image. If your image is in a subfolder called "images", write url('images/image.jpg'). If the image is in a parent folder above your HTML file, write url('../image.jpg'). The two dots mean "go up one level".

If your background image appears but looks stretched or squished, add background-size: cover; to make it fill the space without distorting. If the image repeats when you do not want it to, add background-repeat: no-repeat;. If the image is too dark or too light to read your text, add a semi-transparent color on top of it by using background-color: rgba(255, 255, 255, 0.5); — the last number (0.5) controls how transparent it is, from 0 (invisible) to 1 (solid).

Frequently Asked Questions

Can I have both a background color and a background image at the same time?

Yes. The color appears first, and the image appears on top of it. If your image has transparent areas, the color shows through. This is useful when you want a fallback color in case the image does not load, or when you want to tint the image with a color overlay.

What image formats work for backgrounds?

JPG, PNG, GIF, and WebP all work. JPG is best for photographs. PNG is best for images with transparency or solid colors. WebP is newer and smaller but not supported in older browsers. Avoid very large files — a background image over 500 KB will slow down your page.

How do I make the background image stay in place when someone scrolls?

Add background-attachment: fixed; to your style. This makes the image stay in the same spot on the screen while the content scrolls over it. It creates a parallax effect that many websites use for visual interest.

Can I change the background of just one section of the page, not the whole page?

Yes. Instead of styling the <body> tag, style a <div> or other container. For example, <div style="background-color: yellow;"> will give only that section a yellow background. You can also use a style block to target specific classes or IDs.

What if my background image does not show up?

Check three things: the filename is spelled exactly right, the file is in the folder you said it was, and you used forward slashes (not backslashes) in the path. Open your browser's developer tools (right-click and select "Inspect") and look at the Console tab for error messages. The browser will often tell you exactly what went wrong.

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.