How to change background color in HTML? – Top 5 methods that make you an awesome web developer

  • Reading time:11 mins read

How to change background color in HTML: the background-color property

Here’s a possible solution for changing the background color of a page in HTML:

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

What’s this article about? 

We can set the background color of a whole page, and many of its HTML elements. To do all of this, we’ll use the same CSS property. We have two options of where to place this information within the code.

The article looks at these options and at how you can define the colors you choose, how you can refer to them, and show you some examples of how to change background color in HTML.

How to change background color in HTML

What HTML elements can you assign a background color to?

We can change the background color of many elements when creating a website:

  • The whole page <body> 
  • Headings <h1> 
  • Paragraphs <p>
  • Tables <table>
  • Parts of a page <div> 

We can set the background color of any of these elements, and we can do it in the <head> section or <body> section of the HTML code, in the tag that creates the element you want to change the background color of. We’ll talk about both methods in this article.

How to change background color in HTML – bgcolor of HTML elements

We can change the background color with the background-color CSS property in two ways.

You can add CSS formatting to the top of your HTML code, in the <head> section, or you can use inline CSS formatting, meaning we can set the background color within the tag of the element we want to change. 

CSS background-color property in the head section

If we place our CSS formatting in the <head> section, we have to use selectors to select which element to use the formatting on. In the example below, we want to format the body, meaning the background color of the whole page.

<head>
<style>
body {
  background-color: PeachPuff;
}
</style>
</head>
<body>
<h1>Background color property</h1>
<p>You can set the background color with color names or color codes.</p>
</body>

 

Inline CSS: <tag style=”background-color: color;”>

We can set the background color with the style attribute within the selected tag. We can use this method on the <body> tag, and this will change the background color of the whole page, or we can use the method on almost any HTML element, such as headings <h1>, paragraphs <p>, tables <table>, or parts of the page <div>. Example:

Setting the background color of a heading

<h1 style="background-color:#4287f5">

 

Setting the background color of a paragraph

<p style="background-color: rgb(101,90,140)">

 

Setting the background color of a table

<table style="background-color:Violet;">

 

HTML color names and color codes

After we decide which color to use in the background, we have to choose the format of the color as well. HTML knows the names of 140 colors, such as OliveGreen, PowderBlue, Black, etc.

If we don’t want to use the name of a color, or we choose one that is not included in the 140 named colors, we have to use color codes.

You can learn more about this topic in our article titled HTML Color Codes.

 

How to change background color in HTML?

 

The color name and color code of the same color

 

We can define the color above three ways:

Peach background color, different formats: Name HEX RGB
PeachPuff #FFDAB9 (255, 218, 185)

 

How to change background color in HTML with the bgcolor attribute – an outdated method

There is an HTML attribute called bgcolor, that can define the background color of an HTML element or of the whole page if you place it within the <body> tag.

This solution is getting outdated because of the growing popularity of CSS since we would have to set the background color of each element manually, if we used this method.

HTML5 does not support the bgcolor attribute anymore. You can still find this method on some websites, but we suggest using the style attribute.

<body bgcolor="#734545">
<h1>bgcolor is outdated</h1>
<p>This method is not supported by HTML5, so you should choose from the other methods if you want to set the background color.</p>
</body>

If you’d like to see more programming tutorials, check out our Youtube channel, where we have plenty of video tutorials in English.

 

How to change background color in HTML

 

In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

HTML and CSS:

JavaScript:

Java:

Other materials:

Learn to code and change your career!

100% ONLINE

IDEAL FOR BEGINNERS

SUPPORTIVE COMMUNITY

SELF-PACED LEARNING

Not sure if programming is for you? With CodeBerry you’ll like it.