How to Change a Background in HTML

The simplest way to add a background color or image to a web page

You change a background in HTML by adding a style to the <body> tag or to individual elements. The most common method is to write style="background-color: blue;" or style="background-image: url('image.jpg');" directly into the opening tag. For a solid color, you name the color or use a hex code like #FF5733. For an image, you point to the file path where the image lives on your server or online.

If you want the background to explore to your entire page, put the style in the <body> tag at the top of your HTML file. If you want it on just one section, add the style to a <div>, <section>, or any other element that wraps that content. The browser reads the style and renders the background behind whatever text or content sits inside that element.

Key Takeaways

A background color goes in the opening tag as style="background-color: colorname;" or style="background-color: #hexcode;".
A background image uses style="background-image: url('path/to/image.jpg');" and requires the correct file path or web address.
Put the style on the <body> tag to change the whole page, or on a specific element to change only that section.
You can control how an image repeats, scales, and positions using additional properties like background-size, background-repeat, and background-position.

Adding a solid color background

Open your HTML file and find the <body> tag. Add style="background-color: colorname;" inside the opening tag. For example:

You can use a named color like lightblue, red, green, or white. If you want more control over the exact shade, use a hex code instead. A hex code is a six-character code that starts with a hash symbol, like #FF5733 (a shade of orange) or #000000 (black). You can find hex codes for any color online using a color picker tool.

If you want only part of the page to have a colored background, wrap that content in a <div> and add the style there instead:

<div style="background-color: yellow;"> <p>This text sits on a yellow background.</p> </div>

Adding a background image

To use an image as a background, add style="background-image: url('path/to/image.jpg');" to the element. The path must point to where the image file actually lives. If the image is in the same folder as your HTML file, you can write just the filename:

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

You can also use an image hosted online by pasting its full web address:

By default, the image will repeat (tile) across the entire background. If the image is small, you will see it repeated many times. If the image is large, it may only show once or be cut off at the edges.

Controlling how the background image looks

You can add extra properties to control the size, position, and repeat behavior of a background image. Add them to the same style attribute, separated by semicolons:

background-size controls how large the image appears. Use cover to stretch the image to fill the entire background (it may crop the edges), or contain to fit the whole image inside without cropping (there may be empty space). You can also write a specific size like 400px or 50%.

background-repeat controls whether the image tiles. Use no-repeat to show it only once, repeat-x to repeat only horizontally, or repeat-y to repeat only vertically. The default is repeat, which tiles in both directions.

background-position controls where the image sits. Common values are center, top, bottom, left, and right. You can combine them, like top center or bottom right.

Using a separate CSS file instead of inline styles

If you are styling many elements or want to keep your HTML cleaner, you can write the background styles in a separate CSS file instead of putting them directly in the HTML tag. Create a file called style.css and write:

body { background-color: lightblue; }

Then link that file in the <head> section of your HTML:

This approach is cleaner if your HTML file is long or if you want to reuse the same styles across multiple pages. The browser will read the CSS file and explore those styles to every matching element on the page.

Troubleshooting a background that does not appear

If you add a background style but nothing shows up, check these common problems. First, make sure the file path is correct. If you are using a background image, open the image file in your browser directly to confirm the path works. Second, check that you closed the url() parentheses and the style attribute correctly. A missing quote or semicolon will break the style.

Third, if the background image is very large or the file is far away on the internet, it may take time to load. Open your browser's developer tools (usually F12 or right-click and select "Inspect") and look at the Network tab to see if the image is loading or if there is an error. Fourth, if text on the background is hard to read, add a semi-transparent overlay or change the text color to improve contrast.

Frequently Asked Questions

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

Yes. If you add both, the image will appear on top of the color. If the image does not fill the entire background or has transparent areas, the color will show through. This is useful if you want a solid color to display while the image loads, or if the image has transparency.

What image formats work for backgrounds?

JPG, PNG, GIF, and WebP all work. JPG is best for photographs because it compresses well. PNG is best for graphics or images that need transparency. Use a format that keeps the file size small so the page loads faster.

How do I make the background image stay fixed when the page scrolls?

Add background-attachment: fixed; to your style. This keeps the image in place while the content scrolls over it. For example: style="background-image: url('background.jpg'); background-attachment: fixed;"

Can I change the background of just one paragraph or heading?

Yes. Wrap the element in a <div> or add the style directly to the element. For example, <p style="background-color: yellow;">This paragraph has a yellow background.</p> works just as well as adding it to the body tag.

What is the difference between background-color and background-image?

background-color fills the space with a solid color. background-image displays a picture. You can use one or both. If you use both, the image sits on top of the color.

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.