❮❮ PREV NEXT ❯❯

CSS - Background Color

As the name suggests, the background-color is a property in CSS and is used to set the background color of an HTML element.

Let us understand with the below example.

Setting background color in CSS using <p> element

Example :

<html>
<body>
    <p style = "background-color:blue">This is the first paragraph</p>
    <p style = "background-color:red">This is the second paragraph</p>
</body>
</html>

Output :

To set the background color for the paragraph, we have used the background-color property of the style attribute.

<p style = "background-color:blue">This is the first paragraph</p>

The background-color property is not just restricted to the <p> element. But we can use it any other elements like <span> or <div>.

Setting background color in CSS using <div> element

Example :

<html>
<body>
    <div style = "background-color:blue">This is the first div element</div>
</body>
</html>

Output :

To set the background color for the <div> element, we have used the background-color property of the style attribute.

<div style = "background-color:blue">This is the first div element</div>

Opacity using background color in CSS

Also with the background-color property, we can use the opacity property to set the opacity of background color.

Example :

<html>
<body>
    <div style = "background-color:red">This is the first div element using red color</div>
    <div style = "background-color:red;opacity:0.6">This is the second div element using red color and opacity</div>
</body>
</html>

Output :

So, in the above example, we have used two <div> elements.

The first <div> element uses the background color red with no opacity.

<div style = "background-color:red">This is the first div element using red color</div>

And the second <div> element uses the the background color red with opacity 0.6.

And if you see the above output, you can see a slight blur effect for the second <div> element due to the opacity property.

❮❮ PREV NEXT ❯❯