Setting the background color of a web page or an element on that page can enable you to create unique layouts.

Take the homepage of Delish as an example. The background image of its header section is a colorful soup. To ensure readers can still see the name of the recipe, the background color of the text box is set to white. The effect is striking and easy to read.

You used to be able to simply use the background color attribute to change the background color of a page or element. Say you had wanted to change the background color of a web page to maroon. Then, you would have simply added the bgcolor attribute in the opening body tag and set it to the hex color code #800000, as shown below.

<body bgcolor=”#800000">

However, this attribute has been deprecated in the latest version of HTML, and replaced by a much better alternative. This alternative is the CSS background-color property. Using this property, you can add and change background colors on your website. Let’s walk through how below.

Free Intro Guide to HTML & CSS [Download Now]

Say you were making a table in HTML. Adding a background color can help the table stand out from other elements on the page and make it more readable. Let’s say you wanted to make it aqua. Then you’d add the style attribute to the opening tag of the table. That means only the background color of this specific table will change. Any other element on the page will not be affected.

Here’s the HTML with inline CSS:

 
<table style="background-color:#00FFFF">
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>

Here’s the result:

An HTML table element with aqua background color

Image Source

That’s simple. Now let’s look at what to do if you want to set the background color of multiple elements on a page.

How to Change Background Color in HTML

Let’s say you set the background color of your entire web page to one color and want to set the background color of a specific element to another color on the page. The good news is the process for changing the background color of an element is nearly identical to the process for adding it. You can use inline CSS to do this, but we’ll use multiple styles of CSS in the example below.

For adding background color to the web page, we’ll use internal CSS. Rather than add this CSS in the body of the HTML file, we’ll add it to the head section using a CSS selector. Here’s the CSS:

 
body {
background-color: #DBF9FC;
}

If this was the only CSS, then everything on the page would have the same light blue background, as shown below.

A web page with a light aqua background color

Image Source

But if we wanted to change the background color of the table, then you can use inline CSS to target that single element. Here’s the HTML with inline CSS:

 
<table style="background-color:#00FFFF">
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>

Here’s the result:

An HTML table element with aqua background color on a web page with lighter blue background

Image Source

HTML Background Color Opacity & Transparency

When changing background color in HTML, you aren’t limited to solid colors. You can change the opacity and transparency to create interesting visual effects.

Let’s say you have two Bootstrap buttons side by side. You want visitors to click one — the submit button, for example — and not click the other — the “no thanks” option. Here’s the HTML:

 
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn btn-secondary" type="submit">No thanks</button>

You might decrease the opacity of the latter to make it seem deactivated and drive less clicks. In that case, you can use the CSS opacity property. Values for this property range from 0 to 1, with 0 being completely transparent and 1 being not transparent at all (or completely opaque).

To make the second button 40% see-through, you’d use the .btn-secondary class selector to apply unique style properties to the second button, rather than both buttons. Then, you’d set the opacity level to 0.4.

Here’s the CSS:

 
.btn-secondary {
opacity: 0.4;
}

Here’s the result:

Buttons with background color opacity set

Image Source

You may have noticed we did not need to use the CSS background-color property because we used Bootstrap’s default modifier classes.

Learn more about Bootstrap in The Ultimate Guide to Bootstrap CSS.

HTML Background Color Gradient

For even more style options, you can create a gradient background. This is a special type of image that most commonly shows one color gradually changing to another color in a certain direction like top to bottom, left to right, or diagonally.

These are known as linear gradients. To create a linear gradient, you have to specify at least two color stops. Let’s look at four examples below.

Linear Gradient - Top to Bottom

Say you want your background color to transition from white at the top of the screen to blue at the bottom. Using the body CSS selector, you’ll apply unique style properties to the body of the web page. Rather than use the background-color property, you’ll use the background-image property (or the shorthand “background”). Then you’ll set the property to “linear-gradient” and specify two color stops in parentheses. Here’s the syntax:

 
body { background-image: linear-gradient(color, color); }

That’s not all for CSS. To ensure this image takes up the entire screen, you want to set the html element’s height to 100%.

All together, here’s the CSS:

 
html {
height: 100%;
}
body {
background-image: linear-gradient(#FFFFFF, #0033CC);
}

Here’s the HTML (including the body tags):

 
<body>

<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the top and transitions to blue at the bottom.</p>

</body>

Here’s the result:

HTML Background Color Gradient top to bottom

Image Source

Linear Gradient - Left to Right

Notice that no direction was specified for the linear gradient above. That’s because top to bottom is the default direction. If you’d like to specify another direction, then you’ll add it in the parentheses, before the color stops.

Here’s the CSS for the example above, rewritten so the gradient is left to right.

 
html {
height: 100%;
}
body {
background-image: linear-gradient(to right, #FFFFFF, #0033CC);
}

Here’s the HTML:

 
<body>

<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the left and transitions to blue at the right.</p>

</body>

Here’s the result:

HTML Background Color Gradient left to right

Image Source

Linear Gradient - 45deg Angle

If I wanted the gradient to go diagonally, then I could use the keywords “to bottom right,” “to bottom left,” “to top right,” or “to top left.” If you’d like more control over the direction of your gradient, then you could use angles rather than keywords.

Note that a value of 0 degrees is equivalent to the keyword "to top,” 90 degrees is equivalent to "to right,” and 180 degrees is equivalent to "to bottom.”

If I wanted the gradient to go to top right, for example, then I could set the direction to 45deg. Here’s the CSS:

 
html {
height: 100%;
}
body {
background-image: linear-gradient(45deg, #FFFFFF, #0033CC);
}

Here’s the HTML:

 
<body>

<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the bottom left and transitions to blue at the top right.</p>

</body>

Here’s the result:

HTML Background Color Gradient with 45 degree angle

Image Source

Linear Gradient - Multiple Color Stops

To create a linear gradient, you need a minimum of two color stops. But there’s no maximum, which means you can use as many as you want. Below is an example with four color stops.

Here’s the CSS:

 
html {
height: 100%;
}
body {
background-image: linear-gradient(to bottom right, #FFFFFF, #FF77CC, #8B00FE, #0033CC);
}

Here’s the HTML:

 
<body>

<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the top left and transitions from pink to purple to blue at the bottom right.</p>

</body>

Here’s the result:

HTML Background Color Gradient with multiple color stops

Image Source

Changing Your Background Color with HTML & CSS

Using HTML and CSS, you can add background color to your web page or different elements on the page. This background color can be solid, transparent, or gradient depending on what style you like. This basic web design knowledge can enable you to customize your website and make your content more readable.

New Call-to-action

 css introduction

Originally published Sep 30, 2020 7:00:00 AM, updated September 30 2020

Topics:

HTML