Quick Reach
The background color property of CSS
The Background color property is used to set the background color of HTML elements. For example, setting the background colors of headings in your web page.
Similarly, setting the background color of the entire body, paragraphs or div elements of the document. Following are a few background-color CSS property examples, let us first look at its syntax:
Syntax of CSS background color
The syntax to use background color property:
background-color:#003399;
OR
background-color: red;
OR
background-color: rgb(33,45,55)
The background color can be set by using:
- Hexadecimal value: This value is given by using a hash sign (#) and up to 6 HEX values (0-F) in the background-color property.
- Color name: Giving a color name in background color property like red, green, yellow etc. Generally, this is not the preferred method.
- RGB: RGB stands for Red, Green, Blue. It defines the values of red, green and blue at the range of 0-255 for each. For example, for the R if it is set to 0 means no red and 255 would mean full red.
Example of using background color property
Following example shows how to use the background color property. We will set the colors of <h1>, <p> and <div> tags by using the background-color property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-color: black;
color: #FFFFFF;
}
p
{
background-color: #00FF00;
}
.divex
{
background-color: rgb(012,202,111);
}
</style>
</head>
<body>
<h1>Heading background color set by color name</h1>
<p>Paragraph background color set with HEX value</p>
<div class=“divex”>Div background color is set with RGB value</div>
</body>
</html>
|
CSS background transparent or no opacity example
Following example shows background color as the transparent. By default, the background color property value is set to transparent.
One of the ways you can set the opacity or transparency is with RGBa. To set background opacity or transparent background you can use the fourth value as shown below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-color:rgb(012,202,111)
}
h2
{
background-color:rgba(012,202,111, 0.3)
}
</style>
</head>
<body>
<h1>H1 background color set by simple RGB</h1>
<h2>Heading background color set by RGBa (by setting opacity or transparency to 0.3)</h2>
</body>
</html>
|
As you can see the color of <h2> heading is made transparent by background color opacity in RGB part.
See Also CSS background
Leave A Comment?