The simplest way to change background color

The fastest way to change your page background color is to add a style attribute to the opening <body> tag. Write style="background-color: colorname;" where colorname is the color you want — for example, <body style="background-color: lightblue;"> makes the entire page light blue.

This method works immediately and requires no separate stylesheet. The color applies to everything behind your text and images. You can use color names like red, navy, or coral, or you can use hex codes like #FF5733 for more precise control.

If you want to change only part of a page — like a single section or paragraph — use the same style attribute on a <div> tag instead of the body tag. A div is a container that holds other content, and styling it changes only what's inside.

Key Takeaways

  • Add style="background-color: colorname;" to your <body> tag to change the entire page background.
  • Use color names like blue or gold, or hex codes like #3498db for exact colors.
  • Use a <div> tag with the same style attribute to change the background of only part of a page.
  • A separate CSS file or <style> block in the head gives you more control if you're styling multiple pages or elements.

Using color names versus hex codes

HTML recognizes about 140 color names you can type directly: white, black, orange, purple, tomato, and many others. These are the easiest to remember and read in your code. Type the name exactly as it appears — capitalization does not matter, but spelling does.

Hex codes give you millions of color choices. A hex code is a six-character code starting with a hash mark, like #FF0000 for red or #00FF00 for green. The first two characters control red, the next two control green, and the last two control blue. You can find hex codes for almost any color using an online color picker — search "hex color picker" and click on colors until you find the one you want, then copy the code it shows.

RGB values work the same way as hex codes but use numbers instead: style="background-color: rgb(255, 0, 0);" is also red. Most people find hex codes easier to copy and paste from design tools, but color names are easier to read in your code if you are just using common colors.

Styling the background in a separate CSS file

If you are building a website with multiple pages, putting your styles in a separate CSS file keeps your HTML cleaner and lets you change colors across all pages at once. Create a new file called style.css in the same folder as your HTML file, then write:

body { background-color: lightblue; }

Then link that file in the <head> section of your HTML with <link rel="stylesheet" href="style.css">. The browser reads the CSS file and applies those styles to your page. This method scales better than inline styles because you only write the color once, and if you need to change it later, you change it in one place.

Using a style block in your HTML head

If you do not want to create a separate file, you can write CSS directly in your HTML using a <style> tag in the <head> section. This sits between your <head> tags and looks like:

<style> body { background-color: #3498db; } </style>

This method is cleaner than inline styles because you can style multiple elements in one place, but it only works for that single HTML file. If you have three pages and want them all to have the same background, you would need to copy this block into each file. A separate CSS file is better for that situation.

Changing background color for specific sections

To color only part of your page, wrap that content in a <div> tag and style the div. For example:

<div style="background-color: yellow;"> <h2>This section has a yellow background</h2> <p>This paragraph is inside the yellow box.</p> </div>

Everything inside the div gets the yellow background. You can also use <section> or <article> tags the same way — they work identically for styling purposes. If you are styling many sections, put the styles in a CSS file or style block instead of repeating style= on every div.

Troubleshooting background color problems

If your background color does not appear, check that you spelled the color name correctly or that your hex code has exactly six characters after the hash mark. Common mistakes are typing lightblue when you meant light blue (no space in HTML color names) or forgetting the hash mark in a hex code.

If you are using a CSS file, make sure the <link> tag in your HTML head points to the correct filename and folder. If your CSS file is in a subfolder called css, the link should say href="css/style.css". Check your browser's developer tools — right-click the page, select "Inspect", and look at the Network tab to see if the CSS file loaded. If it shows a 404 error, the path is wrong.

If you set a background color on the body but it does not cover the whole page, check that your HTML and body tags do not have a height limit. By default, the body expands to fit your content, but if you set height: 100vh; in CSS, it fills the entire screen.

Frequently Asked Questions

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

Yes. Use style="background-image: url('image.jpg');" instead of background-color. The image file must be in the same folder as your HTML file, or you need to provide the full path. 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 simple color changes, background-color is clearer and more direct.

How do I make the background transparent?

Use style="background-color: transparent;" or style="background-color: rgba(0, 0, 0, 0);". The second option uses RGBA, which is RGB with an alpha channel — the last number (0 to 1) controls transparency. A value of 0 is fully transparent, and 1 is fully opaque.

Can I change the background color of just the text, not the whole page?

Yes, but you are styling the container around the text, not the text itself. Wrap your text in a <span> or <p> tag and add the style to that. For example, <p style="background-color: yellow;">This text has a yellow background.</p> colors only the area behind those words.

Do I need to refresh my browser to see background color changes?

Usually yes. After you save your HTML file, refresh the page in your browser by pressing Ctrl+R (Windows) or Command+R (Mac). If you are still seeing the old color, try a hard refresh with Ctrl+Shift+R or Command+Shift+R to clear the browser cache.