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

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

Có thể bạn quan tâm

I can still remember the first website I ever built while practicing my web design skills. While working on it, I quickly realized how much impact a background color can have. At first, I just used the default white, because it felt easy and safe. It was fine to create designs like that as a newbie developer, but now as a professional, it feels boring and cliche.

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

Experience has always been my best teacher. Most people don’t realize the importance of a good background color until they stumble on a website with a bad one or create one themselves. The right background color is subtle and seamlessly captures my brand without distracting the user. The wrong background color … well, it’s all the user will notice.

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

That’s why learning to add and change HTML background color is critical. In this post, I’ll show you all the steps I use to add and change the background color of my website using 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 on. 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 HTML Background Color
  • How to Create an HTML Background Color Gradient
  • Choosing the best HTML background color for a web project
  • FAQs: Changing Background Color in HTML
  • HTML Background Color: Useful Tips

What is HTML background color?

In HTML and CSS, background color refers to the color applied to the background of a web page or to a specific HTML element. It is set with the background-color CSS property. By assigning this property a value (color), I can change the background color of its elements.

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 Change Background Color in HTML

There are three ways I use to add or change the background color of an element using CSS: inline CSS, internal CSS, and external CSS. Depending on the situation, I choose from these different methods, so let’s cover them all.

Change Background Color with Inline CSS

The first and simplest way I use to change the background color of an element is inline CSS, which appears in the HTML code itself. To use inline CSS, I first locate the opening tag of the element I want to target, then add the attribute style=“background-color: mycolorhere;”. I can select a unique color code, and it will reflect on my design.

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

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

Also, to change the color of a specific element on my page, like a paragraph, I simply put the inline CSS in just the exact paragraph tag I 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 I find this method is convenient for quick fixes on the front end, it becomes inefficient and difficult to maintain if I need to change the background color of many different elements or pages across my website. That’s why it’s very necessary to separate my CSS from my 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. It is kind of like having a styling section embedded in my HTML document.

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

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

Now, say I 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, I simply change one line of CSS, and all target elements will be changed. This has an increase in efficiency when compared to the inline CSS, but the best is yet to come.

Change Background Color with External CSS

Changing background color with external CSS sheets is the standard for web development, especially when working on a project. With external CSS, I place the CSS in a separate CSS file (called a style sheet).

For example, if I have an HTML file called “index.html” that I want to target with CSS, I 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, all I have to do is 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 I'm making quick one-off tweaks to a single HTML page on my site, external CSS is usually the best way to add background color with CSS. This is because I can target multiple pages on my website, or even my entire website, with one style sheet.

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

Here, I have prepared a tabular comparison of the three methods of changing the HTML background color.

Aspect

Inline CSS

Internal CSS

External CSS

Location

Inside the element's tag.

Inside the <head> section of the HTML file.

In an external .css file linked using <link>.

Scope

Affects only the specific element.

Affects all elements matching the selector in the same HTML document.

Affects all elements matching the selector across multiple HTML files linked to the stylesheet.

Specificity

Highest (inline styles override internal and external styles unless !important is used).

Medium (overridden by inline styles but can override external styles).

Lowest (can be overridden by both inline and internal styles).

Maintainability

Hard to maintain, as styles are scattered in the HTML code.

Easier to maintain than inline CSS but limited to a single file.

Most maintainable, as styles are centralized and reusable across multiple files.

Reusability

Not reusable; applies only to the specific element.

Partially reusable within the same document.

Fully reusable across multiple HTML files.

Best Use Case

Quick fixes or unique styling for a single element.

Styling specific to a single HTML file or when testing.

Styling large websites with consistent designs across multiple pages.

Ease of Use

Simple but not ideal for complex or large projects.

Moderately simple, suitable for small to medium projects.

Requires setting up a CSS file but is ideal for large projects.

How to Change a Div Background Color

If I 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 I want to change the background color of a group of elements.

Changing the background color of a div is no different from changing the background color of my web page’s body. I start by creating a div element. Additionally, I add a class to the div so that it can be targeted with CSS, considering I might probably create more divs, which I might want to give a different background color to:

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

Next, in my CSS code, I target the div using the class I have attributed to it. Then, within the brackets, I include the background-color property.

  • .example { background-color: lightblue; }

And that’s it! My 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

Color names such as “lightblue” and “lightgreen” are one of the many ways I can add colors to my backgrounds. In this section of my blog, I will show you other ways I can specify the background color of my HTML elements.

Background Color Names

As discussed, I 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 a simple 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. When working on a project, I always use hex codes, and as a result of this steady practice, I know the hex code of most colors. 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, I increase the intensity for green (the middle two values) and lower it for red and blue, giving me the hex code #00FF00. Well, for red and green, I have #FF0000 and #0000FF respectively. HubSpot’s signature shade of orange, Solaris, has the hex code #FF5C35.

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

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

color picker

Source

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

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

Background Color RGB Codes

I 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. Personally, I consider this my alternative whenever I am not using hex code.

To add color with RGB, I 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 I need. There are also plenty of hex-to-RGB converters online, like this one.

Background color HSL Values

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

If I am being honest, this is a far less popular way of setting background color; personally, I don't use it so much. Perhaps I am just in love with the other methods of setting background color.

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

How to Add Transparency to HTML Background Color

Guess what? I am not limited to solid when it comes to changing background color in HTML — I can also change the transparency to create visual effects. I think using transparency is a good idea to add some extra depth to my website. In this section, I’ll cover a couple of ways to do that.

Add Transparency Using RGBA

In my opinion, the best way to add transparency to my background color is with the CSS function rgba(). Rgba stands for red, green, blue, and alpha. The alpha 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

When using the hex code to set my background color, I use the 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, just like the “a” in rgba.

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 caveat with this approach: When I lower the opacity of an element (e.g., a div), I lower the opacity of all its child elements, too. In the example above, I can see how the text inside the transparent div is also transparent. This will also happen if I change the opacity of <body> — all elements on the page will be transparent.

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

How to Create an HTML Background Color Gradient

One styling option I find very intriguing is the gradient background. A gradient is when one color gradually changes to another in a direction. Gradients aren’t just static colors. They’re dynamic blends. I use CSS to create gradients, and there are two main types I like to experiment with:

  • Linear gradients — where colors blend along a straight line. It can be from top-to-bottom, left-to-right, or diagonally.
  • Radial gradients — where colors spread out in circles.

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

Top-to-Bottom Linear Gradient Background

Let’s say I want my background color to transition from white at the top of the screen to blue at the bottom. I can do this by applying a linear gradient to the body of my HTML.

Instead of using the background-color property, I’ll use the background property to create a gradient. I’ll add the following CSS targeting the element I 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 I want to make the background of the page into a gradient, apply the background property to the body. I’ll 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, I 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.

If I want to swap the directions, I can use to left.

Diagonal Linear Gradient Background

If I want to make the gradient go in a diagonal direction, I 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, I can use angles rather than keywords. If I want the gradient to go to the top right, I 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.

Radiant Gradient background

Sometimes, I want a gradient that feels more circular. For this, I use a radial gradient. I often play with the shape, like changing ‘circle’ to ‘ellipse,’ to see how it affects the overall design. In addition to selecting the shape, I can also add additional control to further affect the shape, like closest-side, farthest-side, closest-corner, farthest-corner, etc.

Here’s the CSS from the example above, rewritten so the gradient is circular.

See the Pen Radiant Gradient background by Clinton Joy (@Cejay101) on CodePen.

Add Multiple Color Stops to a Background Gradient

To create a linear gradient, I need a minimum of two color stops. But there’s no maximum, which means I can use as many as I 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.

Choosing the best HTML background color for a web project

Adding and changing the background color of a web project is one piece of the puzzle, but choosing the best color to represent it is another piece. When I am faced with this problem, there are a series of steps I take to ensure I provide the best solution.

I ask myself these questions:

  • What mood do I want to convey?
  • Who is the audience?
  • How will the background interact with other design elements like text, images, and buttons?

Based on the answers, here are some steps I take to choose the best color:

  1. Understand the project’s purpose. Colors carry different universal symbolic meanings, and understanding these meanings and comparing them with my project gives a hint about the color group I should be looking to use in my project.
  2. Consider readability. I always ensure the background doesn’t overpower the content. If the text is the primary focus, I opt for neutral tones like off-white or light gray. These colors provide enough contrast to make text readable without straining the eyes. For darker text, light backgrounds work best, while lighter text pairs beautifully with dark backgrounds.
  3. Think about the brand’s identity. Brand identity plays a significant role in my decision. If I’m working on a site for a playful brand, I might choose bold and saturated colors. For a tech startup, cool tones like blues or greens often work better. I use brand guidelines to ensure the background aligns with the company’s established visual identity.
  4. User experience comes first. Lastly, I prioritize usability. I ask myself: Will this background strain users' eyes over time? Will it enhance or distract from the overall experience? These considerations often guide me toward subtle tones and gradients that create a balance between creativity and functionality.

FAQs: Changing Background Color in HTML

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

How do I change the text background color in HTML?

I 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 in my 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?

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

HTML Background Color: Useful Tips

Make color combinations accessible.

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

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

Check background colors across different devices.

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

Think about overall branding.

My site should feel like a natural, intuitive extension of my brand. Before I add or change my background color, I consider whether it is consistent with my branding.

Changing Background Color with HTML & CSS

When working on this piece, I realized just how much creativity can go into something as simple as setting a background color in HTML. From choosing the right solid colors to experimenting with gradients and transparency, I’ve learned that every choice impacts the overall design and user experience.

One thing that stood out to me was how versatile CSS properties like ‘background’ and ‘opacity’ are. They’re not just about aesthetics — they’re tools to create depth, contrast, and focus on a webpage. I also gained a deeper appreciation for the importance of maintainable code, especially when deciding between inline, internal, or external styles.

This basic web design knowledge can enable anyone to customize their website and make their 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 Color Tag Inline