How to Change the Background Color in HTML | 4 Ways to change Background Color using HTML, CSS & JS

How to Change the Background Color in HTML- GadTool

You can effortlessly change the background color of a web page using HTML. Let's know about the ways using which you can change the background color in HTML↴

Using bgcolor attribute
Using Inline CSS
Using Internal CSS
Using backgroundColor property (JavaScript)

Let us know these briefly.

Using bgcolor attribute

Syntax of bgcolor attribute

How to use bgcolor attribute

Using Inline CSS

Syntax of Inline CSS to change the background color of web page

How to use Inline CSS

Using Internal CSS

Syntax of Internal CSS to change the background color of web page

How to use Internal CSS

Using backgroundColor property (JavaScript)

Syntax of backgroundColor property

How to use backgroundColor property

1. Using bgcolor attribute

Using bgcolor attribute appears to be the easiest way to change the background color of a web page using HTML. Firstly, let us know the syntax of this attribute.

Syntax of bgcolor attribute :-

Example :-

ᆞHow to use bgcolor attribute

Consider the given HTML code.

<By GadTool.blogspot.com>
<!DOCTYPE HTML>
<html>
<body>
<h1>GadTool</h1>
<p>Welcome to all the dear readers of the blog, gadtool.blogspot.com.</p>
<p>It is really pleasing to see somebody getting helped by our consistent efforts!! </p>
<h3>We all the creators are trying our best to serve the Internet by providing great value content!!
</h3>
<body>
</html>

For a greater understanding, also check out the output of this HTML code given below when no bgcolor attribute is added↴

How to Change the Background Color in HTML

Now, to change the background color of this HTML web page using bgcolor attribute,

Open the code in any HTML editor and replace <body> tag with <body bgcolor="">
Between the two " (double inverted commas), type the name of the color or hex number of the color or rgb number of the color you want to set as the background color. Example: gold, #56e37c , rgb(86, 227, 124) , etc.
Save the HTML document.

And there you have successfully changed the background color of your HTML web page using bgcolor attribute.

There is the final HTML code, given below, after changing the background color using bgcolor attribute

<By GadTool.blogspot.com>
<!DOCTYPE HTML>
<html>
<body bgcolor="gold">
<h1>GadTool</h1>
<p>Welcome to all the dear readers of the blog, gadtool.blogspot.com.</p>
<p>It is really pleasing to see somebody getting helped by our consistent efforts!! </p>
<h3>We all the creators are trying our best to serve the Internet by providing great value content!!
</h3>
<body>
</html>

Output-

Free tool specially for you:- Notepad Copy- Create & Edit HTML and TXT

2. Using Inline CSS

Using bgcolor attribute is a great way to change the background color of a webpage using HTML. But, this is not the only option left to change background color of HTML web page.

You can use Inline CSS as an alternative to bgcolor attribute. Firstly, let us know the syntax of Inline CSS to change the background color of web page.

Syntax of Inline CSS to change the background color of web page :-

Example :-

ᆞHow to use Inline CSS

Consider the given HTML code.

For a greater understanding, also check out the output of this HTML code given below when no Inline CSS is added↴

Now, to change the background color of this HTML web page using Inline CSS,

Open the text editor and replace <body> tag with <body style="background-color: ">
Type the name of the color or hex number of the color or rgb number of the color you want to set as the background color after : (semicolon). Example: gold, #56e37c , rgb(86, 227, 124) , etc.
Save the HTML document.

And there you have successfully changed the background color of your HTML web page using Inline CSS.

There is the final HTML code, given below, after changing the background color using Inline CSS

<By GadTool.blogspot.com>
<!DOCTYPE HTML>
<html>
<body style="background-color: rgb(86, 227, 124) ">
<h1>GadTool</h1>
<p>Welcome to all the dear readers of the blog, gadtool.blogspot.com.</p>
<p>It is really pleasing to see somebody getting helped by our consistent efforts!! </p>
<h3>We all the creators are trying our best to serve the Internet by providing great value content!!
</h3>
<body>
</html>

Output-

Recommended Read:- How to open URL in a New Window

3. Using Internal CSS

Using Inline CSS may be used to change the background color of a webpage using HTML. But, Inline CSS are quite tough to deal with and are complex to understand. Therefore, in order to make the Inline CSS more easy to understand, we can use Internal CSS as an alternative to Inline CSS.

Unlike Inline CSS, Internal CSS is not included with <body> tag. Instead, it is placed under the <head> tag , while properly the defining the tag for which the CSS is written. Firstly, let us know the syntax of Internal CSS to change the background color of web page.

Syntax of Internal CSS to change the background color of web page :-

<style>

body{

background-color: color_name | hex_color | rgb_number ;

}

</style>

Example :-

<style>

body{

background-color: #56e37c ;

}

</style>

ᆞHow to use Internal CSS

Consider the given HTML code.

<By GadTool.blogspot.com>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>GadTool</h1>
<p>Welcome to all the dear readers of the blog, gadtool.blogspot.com.</p>
<p>It is really pleasing to see somebody getting helped by our consistent efforts!! </p>
<h3>We all the creators are trying our best to serve the Internet by providing great value content!!
</h3>
<body>
</html>

For a greater understanding, also check out the output of this HTML code given below when no Internal CSS is added↴

Now, to change the background color of this HTML web page using Internal CSS,

Open the text editor and add the given code inside <head> tag

<style>

body{

background-color: color_name | hex_color | rgb_number ;

}

</style>

Type the name of the color or hex number of the color or rgb number of the color you want to set as the background color between : and ;. Example: gold, #56e37c , rgb(86, 227, 124) , etc.
Save the HTML document.

And there you have successfully changed the background color of your HTML web page using Internal CSS.

There is the final HTML code, given below, after changing the background color using Internal CSS

<!DOCTYPE HTML>
<!By GadTool.blogspot.com>
<html>
<head>
<style>
body{
background-color: #56e37c ;
}
</style>
</head>
<body>
<h1>GadTool</h1>
<p>Welcome to all the dear readers of the blog, gadtool.blogspot.com.</p>
<p>It is really pleasing to see somebody getting helped by our consistent efforts!! </p>
<h3>We all the creators are trying our best to serve the Internet by providing great value content!! </h3>
<body>
</html>

Output-

4. Using backgroundColor property (JavaScript)

You might be bored of CSS and searching for any other alternative. In such a case, you can give JavaScript a chance to assist you. Alike Inline and Internal CSS, backgroundColor property is also included in <head> tag.

This means that to use backgroundColor property in a HTML web page, you just need to add the backgroundColor property inside a pair of <script> tags, both opening and closing, under the <head> tag.

Firstly, let us know the syntax of backgroundColor property to change the background color of web page.

Syntax of backgroundColor property to change the background color of web page :-

Example :-

ᆞHow to use backgroundColor property

Consider the given HTML code.

For a greater understanding, also check out the output of this HTML code given below when no backgroundColor property is added↴

Now, to change the background color of this HTML web page using backgroundColor property,

Open the text editor and add the given code inside <head> tag

document.body.style.backgroundColor = "";

</script>

Replace with the name of the color or hex number of the color or rgb number of the color you want to set as the background color. Example: gold, #56e37c , rgb(86, 227, 124) , etc.
Save the HTML document.

And there you have successfully changed the background color of your HTML web page using backgroundColor property.

There is the final HTML code, given below, after changing the background color using backgroundColor property

<!DOCTYPE html>
<!By GadTool.blogspot.com>
<html>
<body>
<h1>GadTool</h1>
<p>Welcome to all the dear readers of the blog, gadtool.blogspot.com.</p>
<p>It is really pleasing to see somebody getting helped by our consistent efforts!! </p>
<h3>We all the creators are trying our best to serve the Internet by providing great value content!!
</h3>
</body>
<head>
<script>
document.body.style.backgroundColor = "#cfc342";
</script>
</head>
</html>

Output-