The simplest way to change background color in HTML

You can change the background color of an entire page by adding a style attribute to the opening <body> tag. The quickest method is to write <body style="background-color: blue;"> and replace "blue" with any color name or hex code you want. The browser will fill the entire page background with that color.

If you want to color just one section of the page instead of the whole background, add the style to a <div> or <p> tag around that content. For example, <div style="background-color: lightblue;">Your content here</div> will color only that box.

Key Takeaways

  • Add style="background-color: colorname;" to any HTML tag to color its background.
  • Color names like "blue", "red", and "lightgreen" work in HTML, or use hex codes like "#FF5733" for exact shades.
  • The <body> tag colors the entire page, while <div> and <p> tags color only their own sections.
  • CSS in a <style> block lets you set background colors for multiple elements at once without repeating code.

Using color names versus hex codes

HTML recognizes about 140 standard color names you can type directly: "red", "green", "navy", "coral", "gold", "teal", and many others. These are the easiest to remember and fastest to type. If you need a specific shade that does not have a name, use a hex code instead — a six-digit code starting with a hash mark, like #FF0000 for pure red or #00FF00 for pure green.

Hex codes let you pick from millions of colors. The first two digits control red, the middle two control green, and the last two control blue. You can find hex codes for any color you want by searching "color picker" online, clicking the color you like, and copying the hex value. For example, <body style="background-color: #87CEEB;"> creates a sky blue background.

Setting background color with a style block instead of inline styles

If you are coloring many elements, writing style="background-color:" on each tag gets repetitive. Instead, add a <style> block inside the <head> section of your page. Inside that block, write rules that explore to multiple tags at once.

For example, this code colors all paragraphs yellow and the entire page background light gray:

<head> <style> body { background-color: lightgray; } p { background-color: yellow; } </style> </head>

The <style> block is cleaner than inline styles when your page grows, because you can change all paragraph backgrounds at once by editing one line instead of hunting through your HTML.

Coloring specific sections with classes and IDs

When you want to color only certain paragraphs or divs — not all of them — use a class or ID. A class is a label you give to one or more elements so you can style them together. An ID is a label for a single unique element.

Here is an example using a class:

<style> .highlight { background-color: yellow; } </style> <p class="highlight">This paragraph has a yellow background.</p> <p>This paragraph does not.</p>

The dot before "highlight" in the style block tells the browser it is a class. Any tag with class="highlight" will get that yellow background. You can add the same class to as many tags as you want.

Common mistakes to avoid

The most common error is misspelling "background-color" — it must have a hyphen and no spaces. Writing "backgroundcolor" or "background color" will not work. Also make sure you close the style attribute with a semicolon and a closing quote, like style="background-color: blue;", not style="background-color: blue".

Another mistake is forgetting the hash mark on hex codes. #FF0000 works, but FF0000 without the hash will not. If your color does not appear, check your browser's developer tools by pressing F12, clicking the Console tab, and looking for error messages that point to the line number.

Transparency and layering backgrounds

If you want a background color that is see-through instead of solid, use rgba instead of a color name or hex code. RGBA stands for red, green, blue, and alpha (transparency). The first three numbers work like hex codes, and the fourth number between 0 and 1 controls how transparent it is — 0 is completely invisible, 1 is completely solid, and 0.5 is halfway transparent.

For example, style="background-color: rgba(255, 0, 0, 0.5);" creates a semi-transparent red. This is useful when you want text or images to show through a colored overlay. You can layer a transparent background over an image or another background color to create depth.

Frequently Asked Questions

Can I use a picture as a background instead of a solid color?

Yes, but you use background-image instead of background-color. The syntax is style="background-image: url('image.jpg');" where "image.jpg" is the path to your image file. You can combine both: style="background-color: blue; background-image: url('image.jpg');" so the blue shows if the image does not load.

What if my background color does not show up?

Check that the tag is spelled correctly, the color name or hex code is valid, and the semicolon is in place. If you are using an inline style on a tag inside the body, make sure the tag itself is visible — an empty div with no content and no width or height will not show a background. Also check that no other CSS rule is overriding your color.

Do I need to save my file in a special way to use background colors?

No. Save your file as a plain text file with a .html extension, like "mypage.html". Open it in any web browser by double-clicking it or dragging it into a browser window. The background color will appear when ready — no special software or upload needed.

Can I make the background color change when someone hovers over an element?

Yes, using a feature called :hover. In your style block, write p:hover { background-color: yellow; } to make paragraphs turn yellow when the mouse moves over them. This requires CSS, not just HTML, but it works in any modern browser without extra tools.