Setting the background colour of a web page or an element on that page can enable y'all 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 notwithstanding run into the name of the recipe, the background colour of the text box is set to white. The outcome is striking and easy to read.

Download Now: Free HTML & CSS Hacks

Changing the background color in HTML can make elements stand out

You lot used to exist able to simply use the groundwork color attribute to change the background color of a folio or element.

Say you wanted to alter the background color of a web page to maroon. You would have simply added the bgcolor attribute in the opening trunk tag and fix it to the hex color lawmaking #800000, as shown beneath.

                    <torso bgcolor="#800000">

However, this attribute has been deprecated in the latest version of HTML and replaced past a much amend alternative. This alternative is the CSS groundwork-colour holding. Using this property, you can add and modify groundwork colors on your website.

Allow'due south go through how you can modify background color in HTML. We'll cover:

  • Adding a background color in HTML
  • Changing the background color in HTML
  • Changing the groundwork color of a div
  • Adding transparency to a background color
  • Creating a gradient background colour
  • Frequently asked questions

How to Add Background Color in HTML

To add groundwork color in HTML, use the CSS background-color property. Set it to the color proper name or lawmaking you want and identify it within a style attribute. Then add this manner aspect to an HTML element, like a table, heading, div, or span tag.

Adding a background color tin aid a certain chemical element stand out on the folio, making it more readable.

Nosotros'll walk through this process stride-past-step. For this tutorial, nosotros'll make a table in HTML every bit an example.

1. Identify the HTML element yous'd like to add a background to or create one.

Browse your HTML code to pinpoint which chemical element you lot'd like to change. If information technology's the header, look for the <header> opening tag. If it'southward a div, wait for the <div> tag.

In this case, we're creating a table with the <tabular array> tag.

2. Cull an HTML background color.

You have plenty of HTML color codes to choose from. For this example, we'll brand the color #33475b.

3. Add together a style attribute to the opening tag.

Next, add the way aspect to the opening tag of your element. For this tutorial, only the background color of this specific table will modify. The change will non touch on any other element on the page.

Here'southward the HTML with inline CSS: 

                    <table manner="background-color:#33475b">
<tr>
<th>Proper name</thursday>
<thursday>Job Title</th>                      
<th>Email address</thursday>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Author</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@visitor.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>

HTML table with a navy background color and white font color

That's uncomplicated. Now allow'southward wait at what to do if you lot want to set the background color of multiple elements on a page.

How to Change Background Colour in HTML

Permit'due south say you set the background color of your entire web folio to 1 color and want to change the background color of a specific chemical element to another color. The good news is the process for changing the background colour of an chemical element is nearly identical to the procedure for calculation it.

You can use inline CSS to practice this, merely we'll use multiple styles of CSS in the example below. Permit's walk through this process step-past-step.

1. Find the "trunk" CSS selector.

Rather than add together this CSS in the body tag of the HTML file, we'll add information technology using the body CSS selector. Observe it in your website'due south CSS code.

2. Change the groundwork color of the body.

Next, we'll modify the background color of the entire spider web page using the background-colour property.

Here's the CSS: 

                    body {
groundwork-color: #DBF9FC;
}

Here'due south the consequence:

Page with light aqua background color and a table with the default transparent background

If this was the only CSS, then everything on the folio would accept the same lite blue background. Adjacent, we'll add inline CSS to change the background colour of the table.

3. Add inline CSS to change the background color of specific elements.

If we want to change the groundwork colour of the table, nosotros can use inline CSS to target that single element.

Here'due south the opening tag with inline CSS: 

                    <table fashion="groundwork-color:#33475b">

Here'south the outcome:

Web page with a light aqua background color and a navy blue table

How to Change a Div Groundwork Color

A div is a container element that'southward normally used to designate different sections of a webpage.

Changing the groundwork colour of a div is identical to irresolute the background color of your web page's body.

Usually, a web page volition have many divs. In this tutorial, we'll teach you how to change one div only.

Let's get through the process stride-by-step.

1. Add a CSS course to the div you'd like to change.

First, detect the div in your HTML lawmaking and add together a form to the opening tag. Adding a class to an element will allow you to change that element only.

Here'south what that looks like: 

                    <div grade="example">This is a div on a webpage. </div>

two. Add the new course selector to your CSS lawmaking.

Side by side, head over to your CSS code and add together your new class selector. Within the brackets, include the background-color property.

Here'southward what that looks like: 

                    .example {background-color: ; }

3. Choose a new groundwork color.

Next, choose a CSS background color for your background-color property. We chose rgb(255, 122, 89).

Hither's what that code looks like: 

                    .case { groundwork-colour: rgb(255, 122, 89); }

Here'south the effect:

Image showing two divs with different background colors

All done! You've inverse the background of a div on your web page.

Learn More: The Beginner'south Guide to HTML & CSS

html-css

Want to larn more than near HTML? Download our free guide for best practices for getting started with HTML.

How to Add together Transparency to Your HTML Background Colour

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

To do that, y'all'd use the opacity property in CSS.

What'south the CSS opacity belongings?

The CSS opacity property is added to an HTML element (such equally a div or a table) or a CSS attribute (such equally a class) to make those elements partially or fully transparent. Values for this belongings range from 0 to i, with 0 beingness completely transparent and 1 existence completely opaque.

For this tutorial, we'll utilize two buttons equally an example. Let's walk through the process of adding transparency step-by-footstep.

ane. Place the HTML elements you'd like to make transparent.

If yous already know what you desire to modify, go ahead and find it in your HTML lawmaking.

In this tutorial, nosotros take two Bootstrap buttons side by side. We want visitors to click ane — the submit button — and not click the other — the "no thanks" option.

Here's the HTML: 

                    <button class="btn" type="submit">Submit</button>
<push button course="btn" type="submit">No thanks</push>

Nosotros want to decrease the opacity of the latter to brand it seem deactivated and drive fewer clicks.

To achieve this result, nosotros'll use the CSS opacity property after calculation a class to the button we'll change.

2. Add a form to the element you'd like to alter.

Adjacent, we'll assign an additional CSS class to the second button to distinguish it from the start.

We'll add the class btn-secondary to the button we want to deemphasize.

Hither's what that looks like: 

                    <button class="btn" type="submit">Submit</button>
<push button class="btn btn-secondary" type="submit">No thank you</button>

3. Add together the course selector to your CSS code and apply the opacity holding.

Now that you lot've created a new grade, it's time to add together it to your CSS lawmaking.

To make the second button 40% see-through, we'll use the .btn-secondary grade selector to apply the opacity property. And so, we'll set the opacity level to 0.4.

Hither'due south the CSS: 

                    .btn-secondary {
opacity: 0.4;
}

Hither's the result:

Two Bootstrap buttons, one of which has transparency

Yous may accept noticed we did not need to use the CSS background-colour belongings because we used Bootstrap's default modifier classes.

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

How to Create an HTML Background Color Gradient

For even more manner options, you can create a slope background. This is a special type of image that nigh unremarkably shows one color gradually changing to another color in a sure management similar meridian to lesser, left to right, or diagonally.

These are known every bit linear gradients. To create a linear gradient, you have to specify at least two color stops.

Let'due south look at four quick examples beneath.

Linear Gradient Tutorial - Summit to Bottom

Say you desire your background color to transition from white at the acme of the screen to blue at the bottom.

Using the body CSS selector, y'all'll use unique mode properties to the trunk of the web page. Here's what that looks similar from beginning to end.

  • Footstep i:  Discover the trunk selector in your CSS code.
  • Step two: Your body might already accept a background-colour property. Delete that. Rather than use the groundwork-colour property, you lot'll utilize the groundwork-image belongings.
  • Footstep three: Ready the property to "linear-slope" and specify two color stops in parentheses. Here's the syntax: 
                    body { background-image: linear-gradient(color, color); }
  • Stride 4: Next, y'all desire to set the HTML chemical element'southward acme to 100% to ensure this image takes upwardly the unabridged screen.

All together, here'due south the CSS: 

                    html {
pinnacle: 100%;
}
body {
background-image: linear-gradient(#FFFFFF, rgb(255, 122, 89));
}

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

                    <trunk>
<h1>Linear Slope</h1>
<p>This linear gradient starts as white at the top and transitions to orange at the bottom.</p>
</torso>

Hither's the result:

Linear gradient as a background color in an HTML web page

Linear Gradient  - Left to Right

No direction was specified for the linear gradient to a higher place. That's because top to lesser is the default direction.

If yous'd similar to specify another management, then you'll add it in the parentheses, before the color stops.

Here'south the CSS for the example in a higher place, rewritten so the gradient is left to right. 

                    html {
height: 100%;
}
trunk {
background-image: linear-gradient(to right, #FFFFFF, rgb(255, 122, 89));
}

Hither's the HTML: 

                    <body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the left and transitions to orange at the correct.</p>
</trunk>

Here's the result:

Left-to-right linear gradient background on a web page

Linear Slope - 45° Bending

If I wanted the gradient to go diagonally, and then I could use the keywords "to bottom right," "to bottom left," "to superlative right," or "to elevation left." If you'd like more command over the direction of your gradient, so you could use angles rather than keywords.

Note that a value of 0 degrees is equivalent to the keyword "to height," xc degrees is equivalent to "to correct," and 180 degrees is equivalent to "to bottom."

If I wanted the gradient to go to the top right, for example, so I could set the direction to 45deg.

Hither's the CSS: 

                    html {
height: 100%;
}
body {
background-prototype: linear-gradient(45deg, #FFFFFF, rgb(255, 122, 89));
}

Hither's the HTML:

                    <body>
<h1>Linear Slope</h1>
<p>This linear slope starts as white at the bottom left and transitions to orange at the tiptop right.</p>
</body>

Here'southward the result:

45-degree linear gradient background on a web page

Linear Gradient - Multiple Color Stops

To create a linear slope, you need a minimum of ii color stops. Merely there's no maximum, which ways you tin use as many every bit you want. Below is an example with four color stops.

Here's the CSS: 

                    html {
summit: 100%;
}
body {
background-image: linear-gradient(to bottom right, #33475b, #0033CC, #FF77CC, rgb(255, 122, 89));
}

Here's the HTML: 

                    <torso>
<h1>Linear Gradient</h1>
<p>This linear slope starts equally dark blueish at the top left and transitions from pink to orange at the bottom right.</p>
</trunk>

Here's the upshot:

HTML background gradient with blue, pink, and orange color stops

FAQs: Irresolute Background Colour in HTML

Notwithstanding take questions? Nosotros accept answers for you.

How practise you change text background color in HTML?

You can change the background colour of text in HTML past adding a background-color property to a paragraph (p) or heading (H1, H2, H3... ) chemical element.

Add this property either via inline CSS or on your website's CSS code.

What is the default background color in HTML?

The default background color in HTML is transparent.

How practise I make a background colour transparent?

You can make a background color fully or partially transparent by using an RGBA color code to define the background-color property.

Here'south what that looks similar in CSS: 

                    background-colour: rgba(255, 255, 255, 0);

The final value determines transparency. Exist sure that it's fix to 0 if you want the color to be completely invisible.

How do I remove background color in HTML?

You can fully remove groundwork color by setting the background-color property to "transparent."

Here'southward what that looks like in CSS:

                    background-colour: transparent;

Changing Your Background Color with HTML & CSS

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

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.

New Call-to-action

css introduction

Originally published Feb 16, 2021 7:00:00 AM, updated May 16 2022