How to use the background color in HTML CSS?

Use the “background-color” property to change the background of any element. You can use it in three different ways.

Way 1: The most common use is using it in a CSS file. Generally known as “External CSS.” For example, writing the CSS to a file called “style.css” as you see below:

body {
  background-color: red;
}
div {
  background-color: #E84033;
}
p {
  background-color: rgba(232, 64, 51, .7);
  /* semi-transparent */
}
.class_selector {
    background-color: #8A2BE2;
}
#id_selector {
    background-color: #F1652A;
}

Way 2: The second way is to write inline CSS within an HTML tag. For example, it could be an HTML file named “index.html” (See the example below):

<div style="background-color: blue;">
    <img src="image.jpg" alt="picture">
    <p style="background-color: #007EC6;">Some text goes here....</p>
</div>

Way 3: You can also write the CSS background color within a <style> tag in your HTML file. This process of writing CSS is generally known as Embedded CSS. See the example below:

<style>
    body {
        background-color: green;
    }
    p {
        background-color: #69af07;
    }
    .class_selector {
        background-color: #8A2BE2;
    }
    #id_selector {
        background-color: #F1652A;
    }
</style>

Difference between the “background-color” & “background” properties

You can use both background-color or background property to change an element’s background color. See the examples below.

div {
	background-color: red;
}
.container {
	background: green;
}
#content {
	background-color: #7F53AC;
}

The “background-color” property only accepts the color value that could be any HTML color name, hex color code, RGB color, etc.

On the other hand, the “background” can accept multiple values such as background color, background image, color & image positions, etc. You can think of it as a shorthand. For example, if you want to use a background color & image together, use the following CSS:

section {
  background: rgba(232, 64, 51, .7) url('./image.jpg') no-repeat fixed center;
}
/* OR */
section {
  background:linear-gradient( rgba(232, 64, 51, 0.5) 100%, rgba(36, 148, 68, .3) 100%), url('./image.jpg') center;
}

Gradient background color examples

.example {
  background-color: #7f53ac;
  background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
}

.example {
  background-color: #045de9;
  background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
}

.example {
  background-color: #90d5ec;
  background-image: linear-gradient(315deg, #90d5ec 0%, #fc575e 74%);
}

.example {
  background-color: #42378f;
  background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
}

Background image and color together

.example {
  background-color: #42378f;
  background-image: url('bulb.jpg');
}

.example {
  background:linear-gradient( rgba(#42378f, 0.8) 100% ), url('bulb.jpg');
}

You got a few clear examples. If you want to explore more, see background-image size CSS.

Background CSS opacity

You can create many nice effects & visualization with the background CSS opacity. The opacity specifies the level of transparency of an object or element.

I will show you a couple of real-world examples that you may need to use on your web design project.

Example #1: opacity of an image

In the above example, I have the following CSS:

.image-1 {
  opacity: 0.3;
}
.image-2 {
  opacity: 0.7;
}
.image-3 {
  opacity: 1;
}

Example #2: Hover effect on image

In the above example, the images have an opacity of 0.5. But the opacity changes to 1 when you hover over them. For the above example, I have the following CSS:

img {
  opacity: 0.6;
  transition: opacity 0.8s ease-out;
}
img:hover {
  opacity: 1;
}

Example #3: Background image & color together behind a text

In the above example, I have a text and this text has a background image & the background image has an overlay color. I have the following CSS:

background:linear-gradient( rgba(232, 64, 51, 0.5) 100%, rgba(36, 148, 68, .3) 100%), url('image.jpg') center;

Changing background color in HTML

If you already have a background color for an HTML property, you can change it by replacing the existing color value. But if you can’t figure out where the color is coming from, you should inspect the element to find it. Otherwise, you may have to write another CSS with higher specificity.

Now the question is how you can make a higher specificity when you can’t figure this out. Well, if you inspect the element, you will see the specificity as you see in the screenshot below.

Now you can make a higher specificity such as:

body .home-page-testimonial {
  background-color: red;
}

How to change the background color in HTML without CSS?

You can’t change the background color in HTML without CSS. But you can write the inline or embed CSS in your HTML document to change the background color. Either way, you need CSS to do that. See two of the example below.

<div style="background-color: red;">
  <p>Your text goes here</p>
</div>

<!-- OR -->
<style>div {background-color: red;}</style>
<div>
  <p>Your text goes here</p>
</div>

There is another way you can change the background color is by using JavaScript. See the example code below.

document.getElementById("yourID").style.backgroundColor = "red"
// or
document.querySelector("div").style.backgroundColor = "red"
// or
document.querySelector(".yourClass").style.backgroundColor = "red"

The above three lines do the same thing, change the background color. However, in JavaScript, it’s “backgroundColor” which is different from the CSS “background-color” property.

Conclusion

Now you know many things about CSS background color and learned how you can change existing background colors with higher specificity, etc. You also learned gradient background color.

That’s a lot. Are you missing any examples? Let me know.