How To Add & Change Background Color In HTML - HubSpot Blog

Trang chủ » Html Bgcolor Tag » How To Add & Change Background Color In HTML - HubSpot Blog

Có thể bạn quan tâm

You don’t realize the importance of a good background color until you stumble on a website with a bad one. The right background color is subtle, and seamlessly captures your brand without distracting the user. The wrong background color … well, it’s all the user will notice, probably.

Person adding and changing the background color of a website in html

Download Now: How to Land a Developer Role in the World of AI [Free Checklist]

That’s why learning to set a background color is critical. In this post, I’ll teach you how to change the background color of your website with HTML and CSS. And don’t worry if you’re not a coding wiz — I’ll give you code snippets that you can paste into your CMS, code files, or whatever you’re working in. Let’s get started.

Table of Contents

  • What is HTML background color?
  • How to Change Background Color in HTML
  • How to Change a Div Background Color
  • Background Color HTML Codes
  • How to Add Transparency to Your HTML Background Color
  • How to Create an HTML Background Color Gradient
  • FAQs: Changing Background Color in HTML
  • HTML Background Color: Useful Tips
  • Changing Your Background Color with HTML & CSS

What is HTML background color?

In HTML and CSS, background color is set with the background-color CSS property. By assigning the property a color, you change the background color of its element.

How to Change Background Color in HTML

There are three ways to add or change the background color of an element using CSS: inline CSS, internal CSS, and external CSS. I recommend using different methods in different situations, so let’s cover them all.

Change Background Color with Inline CSS

The first and simplest way to change the background color is by using inline CSS, which appears in the HTML code itself. To use inline CSS, find the opening tag of the element you want to target, then add the attribute style=“background-color: yourcolorhere;”. Replace “yourcolorhere” with a color code or a CSS color name.

If you want to change the entire background of your webpage, insert the inline CSS into the opening <body> tag like so:

<body style="background-color: #FF474C;"> <!-- page content goes here --> </body>

To change the color of a specific element on your page, like a paragraph, put the inline CSS in just the paragraph tag you want to target, like this:

<p style="background-color: lightblue;">This is a paragraph with a light blue background.</p>

Here’s an example of a webpage with a custom background color for the entire page, and a color for each element. Notice how the background colors for the page elements all override the background color of the <body> tag.

See the Pen html background color - inline example by HubSpot (@hubspot) on CodePen.

While this method is convenient for quick fixes on the front end, it becomes difficult to maintain if you need to change the background color of many different elements or pages across your website. That’s why it’s usually a good idea to separate your CSS from your HTML, which I’ll cover next.

Change Background Color with Internal CSS

Internal CSS is placed inside the HTML document, but, unlike inline CSS, it’s placed in a separate <style> tag.

The example below uses the same style rules as the inline CSS example above, but note how the CSS is inside <style>.

See the Pen html background color - internal example by HubSpot (@hubspot) on CodePen.

Now, say you want to change the background color of the H2, paragraph, and button elements on the page. Rather than editing the inline CSS of every page element, you simply change one line of CSS, and all target elements will be changed.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

  • Expert advice on how to build a portfolio
  • Top programming languages to learn
  • Resume building and interview tips
  • Resources to strengthen communication skills
Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

Change Background Color with External CSS

With external CSS, you place the CSS in a separate CSS file (called a style sheet).

For example, if you have an html file called “index.html” that you want to target with CSS< you can create a separate file called “style.css” and place this CSS code in it.

body { background-color: lightgreen; } h2, p, button { background-color: lightblue; }

Then, in index.html, reference the stylesheet by adding this line of code inside the <head> section of the document:

<link rel="stylesheet" href="style.css">

In my experience, unless you’re making quick one-off tweaks to a single HTML page on your site, external CSS is usually the best way to add background color with CSS. This is because you can target multiple pages on your website, or even your entire website, with one style sheet.

For instance, if you wanted to change the background color of every page on your site, all you would need to do is change the background-color property of body in the style sheet. This will change the background color of all pages.

How to Change a Div Background Color

If you want an element — for example, a CTA or an important piece of text — to stand out on the page, adding a background color is one way to do it.

A div is a container element commonly used to designate different sections of a webpage. A webpage will usually have many divs, which is useful if you want to change the background color of a group of elements.

Changing the background color of a div is similar to changing the background color of your web page’s body. Start by creating a div element. Additionally, add a class to the div so that it can be targeted with CSS:

<div class="example"> <p>This is some CTA text.</p> <button>Click me</button> </div>

Next, add the class selector to your CSS code. Within the brackets, include the background-color property.

.example { background-color: lightblue; }

And that’s it! Your div will now have a different background color from the rest of the page. Here’s the HTML and the CSS together (I also added some additional CSS properties to make the CTA look a little better):

See the Pen CTA example by HubSpot (@hubspot) on CodePen.

Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.

Background Color HTML Codes

So far, I’ve shown how to to add colors to the backgrounds of page elements using color names like “lightblue” and “lightgreen”. But there are actually a few ways to specify your background colors. Next, I’ll review the different ways you can write colors in CSS.

Background Color Names

As discussed, you can use the names of many colors in CSS. Modern browsers support 140 standardized HTML color names, including simple ones like red, green, blue, yellow, orange, etc. There are also more precise hues like darkred, lightgreen, skyblue, khaki, and coral.

Check out a color reference like this for a list of all HTML color names and their corresponding hex and RGB codes. When you find a color value you like, use it as the value of your background-color property.

Here’s an HTML page that uses an HTML color name for its background-color:

See the Pen html background color - color name. by HubSpot (@hubspot) on CodePen.

Background Color Hex Codes

Hex codes are the most popular format for adding color to page elements. A hex code is a hexadecimal (base 16) number preceded by a hash symbol (#).

Every hex code contains six characters, and each pair of characters determines the intensity of the three primary colors (red, green, and blue in that order) from 00 (lowest intensity) to FF (highest intensity).

For example, white is the highest intensity of all three colors, so its hex code is #FFFFFF. Black is the opposite — the lowest intensity of all colors, or #000000. For the color green, we increase the intensity for green (the middle two values) and lower it for red and blue, giving us the hex code #00FF00. HubSpot’s signature shade of orange, Solaris, has the hex code #FF5C35.

If you do the math, there are 16,777,216 possible hex codes. Fortunately, you don’t need to guess which color works best for your background. You can use an HTML color picker like this one to select a color from a spectrum, then simply copy the hex code it gives you. (If you need help choosing a website color scheme, I’ve got you covered there, too.)

Image Source

Here’s an HTML page that uses a hex code for its background-color:

See the Pen html background color - hex code by HubSpot (@hubspot) on CodePen.

Background Color RGB Codes

We can also create HTML color values with RGB (red, green, blue) notation. Like hex codes, RGB values allow us to target a color value by specifying its red, green, and blue intensity.

To add color with RGB, use the rgb() CSS function. This function takes three values inside the parentheses, each specifying the intensity of red, green, and blue in the color. Each value is a number from 0 to 255, with 0 being the least intense and 255 being the most intense.

For example, the RGB function for sky blue in CSS is rgb(135, 206, 235):

See the Pen html background color - rgb by HubSpot (@hubspot) on CodePen.

HTML color pickers will also provide RGB values along with hex codes, so this is the easiest way to find the RGB code you need. There are also plenty of hex-to-RGB converters online, like this one.

Background color HSL Values

Finally, you can use HSL values to set your colors in CSS. HSL, which stands for hue, saturation, and lightness, is written with the hsl() function. The syntax is similar to RGB, except you use percentages to indicate the saturation and lightness of the hue you pick.

See the Pen html background color - body top-to-bottom gradient by HubSpot (@hubspot) on CodePen.

How to Add Transparency to Your HTML Background Color

You aren’t limited to solid colors when changing background color in HTML — you can also change the transparency to create visual effects. I think using transparency is a good idea to add some extra depth to your website. In this section, we’ll cover a couple of ways to do that.

Add Transparency Using RGBA

The best way to add transparency to your background color is with the CSS function rgba(). The “a” stands for alpha channel, which represents the level of transparency in a color. This function takes one extra value from 0 to 1, where 0 is completely transparent and 1 is completely opaque.

So, if I wanted to use the color Solaris on a div with 25% transparency, I’d write the following:

div { background-color: rgba(255, 92, 53, 0.75); }

Here’s what a background color with 0.75 transparency looks like next to a completely opaque background. I’ve also added a background image to demonstrate the transparency of the transparent div.

See the Pen HTML Background Color - transparency by HubSpot (@hubspot) on CodePen.

Add Transparency Using the Opacity Property

You can also use the CSS opacity property to set the transparency of an element’s background color. This property takes a value from 0 to 1, with 0 being completely transparent and 1 being completely opaque.

So, if I wanted to use the Solaris on a div with 75% opacity (the same as 25% transparency), I’d write the following:

div { background-color: #FF5C35; opacity: 0.75; }

Here’s what the div looks like with a fully opaque div for comparison:

See the Pen HTML Background Color - opacity example by HubSpot (@hubspot) on CodePen.

However, there’s a problem with this approach: When you lower the opacity of an element (e.g., a div), you lower the opacity of all its child elements, too. In the example above, you can see how the text inside the transparent div is also transparent. This will also happen if you change the opacity of <body> — all elements on the page will be transparent.

That probably isn’t what you want, so the best way to make a background color transparent without affecting the nested elements is to use the rgba() function or, if you just want to make the color lighter, simply use a lighter color for the background.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

  • Expert advice on how to build a portfolio
  • Top programming languages to learn
  • Resume building and interview tips
  • Resources to strengthen communication skills
Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

How to Create an HTML Background Color Gradient

For even more style options, you can create a gradient background. A gradient is when one color gradually changes to another in a direction. Gradients can be an excellent addition to your website if they work with your branding.

A gradient requires at least two color stops and can go top-to-bottom, left-to-right, or diagonally. Gradients that go in one direction are called linear gradients.

Top-to-Bottom Linear Gradient Background

Say you want your background color to transition from white at the top of the screen to blue at the bottom. You can do this by applying a linear gradient to the body of your HTML.

Instead of using the background-color property, we’ll use the background property to create a gradient. Add the following CSS targeting the element you want to apply the gradient to:

div { background: linear-gradient(#FFFFFF, #0000FF); }

Here’s what that gradient looks like on a div:

See the Pen background color - top-to-bottom gradient by HubSpot (@hubspot) on CodePen.

If you want to make the background of the page into a gradient, apply the background property to body. Also, set the element’s height to height: 100vh (viewport height) to ensure the gradient takes up the entire screen.

See the Pen html background color - body top-to-bottom gradient by HubSpot (@hubspot) on CodePen.

Left-to-Right Linear Gradient Background

Notice that I didn’t specify a direction for the linear gradient above. That’s because top to bottom is the default direction of a gradient in CSS. To change the direction of the gradient, you can add the direction to right in the parentheses before the color stops.

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

See the Pen background color - left-to-right gradient by HubSpot (@hubspot) on CodePen.

to left also works if you want to swap the directions.

Diagonal Linear Gradient Background

If you want to make the gradient go in a diagonal direction, you can use the values to bottom right, to bottom left, to top right, or to top left. Here are two examples of that:

See the Pen background color - diagonal gradient, keywords by HubSpot (@hubspot) on CodePen.

Or, for more control over the direction of the gradient, you can use angles rather than keywords. If you want the gradient to go to the top right, you can set the direction value to 45deg. Here are a couple of examples of using degrees:

See the Pen background color - diagonal gradient, degrees by HubSpot (@hubspot) on CodePen.

Add Multiple Color Stops to a Background Gradient

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. Here’s an example with three color stops that go from white to blue to red:

See the Pen background color - top-to-bottom gradient, 3 stops by HubSpot (@hubspot) on CodePen.

FAQs: Changing Background Color in HTML

Still have questions about background color in HTML? I’ve got answers.

How do you change text background color in HTML?

You can change the background color of text in HTML by adding a background-color property to a paragraph (p) or heading (H1, H2, H3... ) 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 for most HTML elements is transparent. However, some elements may have a different background color that is set by the browser, such as <textarea>, <input>, and <button>. Usually, this browser-set background color is a shade of white or gray.

How do I make a background color transparent?

The best way to make a background color fully or partially transparent is by using an RGBA color code to define the background-color property. Here’s an example:

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

How do I remove the background color in HTML?

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

HTML Background Color: Useful Tips

Make your color combinations accessible.

When adding a background color to your site or an element, I urge you to consider accessibility best practices. Namely, make sure that there is sufficient color contrast between the text and background color.

To do this, you can use a color contrast checker. It's also wise to run through this website accessibility checklist to double-check that the rest of your site meets accessibility standards.

Check your background colors across different devices.

Having a responsive website is a must. When adding or changing background color, check to see that it looks great on all devices — not just on a desktop computer.

Think about your overall branding.

Remember: Your site should feel like a natural, intuitive extension of your brand. Before you add or change your background color, consider whether it is consistent with your branding.

Changing Your Background Color with HTML & CSS

I love using HTML and CSS to add background color to a web page or different elements. Whether this background color is solid, transparent, or gradient depends on styling and branding. This basic web design knowledge can enable you 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.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

  • Expert advice on how to build a portfolio
  • Top programming languages to learn
  • Resume building and interview tips
  • Resources to strengthen communication skills
Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

Từ khóa » Html Bgcolor Tag