The simplest way to change background color

The fastest way to change your HTML background color is to add a style attribute to the opening <body> tag. Inside that tag, write style="background-color: colorname;" and replace "colorname" with the color you want. For example, <body style="background-color: blue;"> makes the entire page background blue.

This method works when ready and requires no separate files or setup. The color applies to everything behind your text and images. You can use color names (like red, green, navy), hex codes (like #FF5733), or RGB values (like rgb(255, 87, 51)).

If you want to change only part of the page background — say, a single section or box — use the same style attribute on a <div> or other container instead of the body tag.

Key Takeaways

  • Add style="background-color: colorname;" to your <body> tag to change the entire page background.
  • Color names (blue, red), hex codes (#FF5733), and RGB values (rgb(255, 87, 51)) all work in the style attribute.
  • To change only part of the page, add the same style to a <div> or container element instead.
  • A separate CSS file or <style> block in the head gives you more control if you have many pages or want to reuse the same colors.

Using a style block for multiple pages

If you have more than one HTML page and want them all to share the same background color, a style block in the head section is cleaner than repeating the style attribute on every body tag. Add this between your <head> tags:

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

Replace "lightblue" with your chosen color. This method keeps your HTML cleaner and makes it easier to change the color later — you only have to edit it in one place instead of on every page.

You can also add other styling in the same block, like text color, font size, or margins, all at once.

Color names, hex codes, and RGB values

HTML recognizes about 140 color names you can type directly: blue, red, green, orange, purple, navy, teal, coral, and many others. These are the easiest to remember and type, but your color choices are limited to that set.

Hex codes give you millions of colors. A hex code starts with a # followed by six characters: #FF5733 is a shade of orange, #000000 is black, #FFFFFF is white. You can find hex codes by searching "color picker" online — paste the code directly into your style attribute.

RGB values work the same way. RGB stands for red, green, blue, and you write it as rgb(255, 87, 51) where each number goes from 0 to 255. The same color picker tools show you the RGB value alongside the hex code.

Changing background color for specific sections

You do not have to change the entire page background. Wrap the section you want to color in a <div> tag and add the style to that div instead:

<div style="background-color: lightyellow;"> <p>This paragraph has a light yellow background.</p> </div>

Everything inside that div — text, images, other elements — sits on the colored background. The rest of the page keeps its original background. You can nest divs inside each other and give each one a different background color.

This approach is useful when you want a colored box around a heading, a sidebar, a footer, or any other distinct part of your page.

Using a separate CSS file

For larger websites with many pages, a separate CSS file keeps your code organized. Create a new file called something like styles.css and write your background color rule there:

body { background-color: #E8F4F8; }

Then link to that file in the head of every HTML page:

<link rel="stylesheet" href="styles.css">

Now every page that links to styles.css uses the same background color. If you want to change it later, you edit only the CSS file, and the change appears on all pages at once. This method also makes your HTML files smaller and easier to read.

Troubleshooting background color that does not show

If you add a background color but it does not appear, check that your opening and closing tags match. The style attribute must be inside the opening tag: <body style="background-color: blue;">, not after the closing tag.

Also check your color name or code for typos. If you use a hex code, make sure it starts with # and has exactly six characters. If you use RGB, make sure each number is between 0 and 255 and the values are separated by commas.

If you are using a style block or CSS file, make sure the file is saved and the link path is correct. Open your page in a browser and use the browser's inspect tool (right-click and select "Inspect") to see whether the style is actually being applied.

Frequently Asked Questions

Can I use an image as a background instead of a solid color?

Yes. Use style="background-image: url('imagefile.jpg');" instead of background-color. Replace 'imagefile.jpg' with the path to your image file. You can combine this with background-color as a fallback if the image does not load.

What is the difference between background-color and background?

The background property is a shorthand that can set color, image, size, and position all at once. The background-color property sets only the color. For straightforward color changes, background-color is clearer and easier to read.

Does background color affect text readability?

Yes. Light text on a light background or dark text on a dark background is hard to read. If you use a dark background color, use light text (white or light gray). If you use a light background, use dark text (black or dark gray). Test your page in a browser to make sure the contrast is clear.

Can I make the background color transparent?

Yes, by using background-color: transparent; or rgba(255, 255, 255, 0) where the last number (0) means fully transparent. This is useful when you want a div or section to show the background behind it instead of covering it with color.