The simplest way: use the bgcolor attribute on the body tag

The quickest way to change your page background is to add bgcolor to your opening <body> tag. Write <body bgcolor="blue"> and your entire page will have a blue background. You can use any color name that HTML recognizes — red, green, yellow, purple, orange, pink, gray, and dozens more.

This method works in every browser and requires no extra code. It applies the color to the whole page at once. The downside is that bgcolor is considered outdated by modern web standards, though browsers still support it. If you are building a page for yourself or a small project, bgcolor works fine. If you are learning web development professionally, you will want to move toward CSS instead.

The modern way: use CSS in a style tag

Current web development uses CSS (Cascading Style Sheets) to control colors. You add a <style> tag inside your <head> section and write a rule for the body background. The code looks like this:

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

This does exactly what bgcolor does, but it follows modern standards. The advantage is that once you learn this pattern, you can change colors for any element on your page — not just the background. You can style paragraphs, buttons, headers, and anything else the same way.

Color names work the same way in CSS as they do in bgcolor. You can also use hex codes (like #FF5733) or RGB values (like rgb(255, 87, 51)) if you want precise control over the exact shade.

Key Takeaways

  • The bgcolor attribute on the body tag is the fastest way to add a background color, though it is considered outdated.
  • CSS with a style tag in the head section is the modern standard and gives you more control over styling other elements too.
  • You can use color names like "blue" or "red", hex codes like "#FF5733", or RGB values like "rgb(255, 87, 51)" in either method.
  • Both methods apply the color to your entire page background unless you add CSS rules for specific sections.

Using hex codes and RGB for exact colors

Color names cover the basics, but they are limited. If you need a specific shade — a particular brand blue or a custom gray — use a hex code or RGB value instead. Hex codes start with a hash mark followed by six characters: #FF5733 is a shade of orange, #1A1A1A is nearly black. RGB values use three numbers from 0 to 255: rgb(255, 87, 51) is the same orange as the hex code above.

You can find hex codes and RGB values using a color picker tool. Search "color picker" in your browser and click on any color you want — the tool will show you the hex code and RGB value. Then paste that code into your bgcolor attribute or CSS rule. The syntax is the same: <body bgcolor="#FF5733"> or background-color: #FF5733; in CSS.

Changing background color for specific sections, not the whole page

Sometimes you want only part of your page to have a colored background. Use CSS to target a specific element. If you have a <div> or <section> tag around the content you want to color, add a rule for it in your style tag:

<style> .highlight { background-color: yellow; } </style>

Then add class="highlight" to the element you want colored. This way your page background stays one color and only the section with the class gets yellow. You can create as many classes as you need and reuse them throughout your page.

Why bgcolor is outdated but still works

The bgcolor attribute was part of early HTML and worked well for simple pages. As websites became more complex, developers needed better control over styling — colors for buttons, text, borders, shadows, and more. CSS was designed to handle all of this in one place. Modern web standards recommend using CSS instead of bgcolor because it keeps your HTML cleaner and makes your code easier to update later.

Browsers still support bgcolor because millions of older pages use it, and removing support would break those pages. You will not get an error if you use it. But if you are starting a new project or learning web development, start with CSS. It is the skill you will need going forward.

Combining background color with text color for readability

A colored background only matters if people can read the text on top of it. If you use a dark background color, make sure your text is light. If your background is light, use dark text. You control text color the same way you control background color — with CSS or with an older attribute called text.

In CSS, use color: white; to make text white. For example:

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

This creates a navy background with white text, which is easy to read. Test your color combinations on a real screen before you publish — what looks good on your monitor might be hard to read on a phone or in bright sunlight.

Frequently Asked Questions

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

Yes. In CSS, use background-image: url('image.jpg'); instead of background-color. The image file needs to be in the same folder as your HTML file, or you need the full web address to the image. You can combine this with background-color as a fallback if the image does not load.

What if my background color does not show up?

Check that your tag is spelled correctly — it is background-color in CSS, not background alone (though background works too). Make sure your color value is valid — color names must be spelled right, and hex codes must have six characters after the hash mark. If you are using bgcolor, make sure it is inside the opening <body> tag, not somewhere else.

Does background color affect how fast my page loads?

No. A solid color background is one of the lightest things you can add to a page. Images as backgrounds can slow things down slightly, but a color takes almost no time to load.

Can I make the background color transparent?

In CSS, use background-color: transparent; to remove the background color entirely. This is useful if you are styling a specific element and want it to blend with whatever is behind it. The bgcolor attribute does not support transparency.