Definition:
CSS background-color specifies the background color of an element.
Property Values are:
background-color:
color
transparent
initial
inherit
Syntax:
background-color: color;
background-color: transparent;
background-color: initial;
background-color: inherit;
1) background-color: color;
CSS background-color can be defined as the following possible color values. An integer value can range from 0 to 255.
- Color
- HEX value
- RGB value
- RGBA value
- HSL value
- HSLA value
1.1 background-color: color;
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-red
{
background-color: red;
}
#background-color-blue
{
background-color: blue;
}
</style>
</head>
<body>
<div id="background-color-red">
<h3>Here is an example of background-color-red.</h3>
</div>
<div id="background-color-blue">
<h3>Here is an example of background-color-blue.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color-red.
Here is an example of background-color-blue.
1.2) background-color: HEX Value;
HEX value starts with the symbol “#” followed by 3 or 6 numbers 0-9 or letters A-F. For example #FFF or #FFFFFF.
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-green
{
background-color: #00ff33;
}
#background-color-purple
{
background-color: #ff00e1;
}
</style>
</head>
<body>
<div id="background-color-green">
<h3>Here is an example of background-color-green defined by HEX value.</h3>
</div>
<div id="background-color-purple">
<h3>Here is an example of background-color-purple defined by HEX Value.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color-green defined by HEX value.
Here is an example of background-color-purple defined by HEX Value.
1.3) background-color: RGB Value;
RGB stands for red, green, and blue.
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-blue
{
background-color: rgb(21, 26, 74);
color:white;
}
#background-color-brown
{
background-color: rgb(81, 46, 54);
color:white;
}
</style>
</head>
<body>
<div id="background-color-blue">
<h3>Here is an example of background-color-blue defined by RGB value.</h3>
</div>
<div id="background-color-brown">
<h3>Here is an example of background-color-brown defined by RGB Value.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color-blue defined by RGB value.
Here is an example of background-color-brown defined by RGB Value.
1.4) background-color: RGBA Value;
RGBA stands for red, green, blue, and alpha.
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-dark-blue
{
background-color: rgba(21, 54, 94, 1.6);
color:white;
}
#background-color-light-blue
{
background-color: rgba(21, 44, 84, 0.6);
color:white;
}
</style>
</head>
<body>
<div id="background-color-dark-blue">
<h3>Here is an example of background-color-dark-blue defined by RGBA value.</h3>
</div>
<div id="background-color-light-blue">
<h3>Here is an example of background-color-light-blue defined by RGBA Value.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color-dark-blue defined by RGBA value.
Here is an example of background-color-light-blue defined by RGBA Value.
1.5) background-color: HSL Value;
HSL stands for Hue, Saturation and Lightness.
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-red
{
background-color: hsl(0, 100%, 50%);
color:white;
}
#background-color-green
{
background-color: hsl(132, 100%, 50%);
color:white;
}
</style>
</head>
<body>
<div id="background-color-red">
<h3>Here is an example of background-color-red defined by HSL value.</h3>
</div>
<div id="background-color-green">
<h3>Here is an example of background-color-green defined by HSL Value.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color-red defined by HSL value.
Here is an example of background-color-green defined by HSL Value.
1.6) background-color: HSLA Value;
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-light-green
{
background-color: hsla(120,100%,75%,0.3);
color:white;
}
#background-color-dark-green
{
background-color:hsla(120,100%,25%,0.3);
color:white;
}
</style>
</head>
<body>
<div id="background-color-light-green">
<h3>Here is an example of background-color-light-green defined by HSLA value.</h3>
</div>
<div id="background-color-dark-green">
<h3>Here is an example of background-color-dark-green defined by HSLA Value.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color-light-green defined by HSLA value.
Here is an example of background-color-dark-green defined by HSLA Value.
2. background-color:transparent;
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-transparent
{
border: 10px dotted black;
background-color: transparent;
}
</style>
</head>
<body>
<div id="background-color-transparent">
<h3>Here is an example of background-color:transparent.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color:transparent.
3. background-color: initial;
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-initial
{
border: 10px dotted black;
background-color: initial;
}
</style>
</head>
<body>
<div id="background-color-initial">
<h3> Here is an example of background-color: initial.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color: initial.
4. background-color:inherit;
<!DOCTYPE html>
<html>
<head>
<style>
#background-color-inherit
{
border: 10px dotted black;
background-color: inherit;
}
</style>
</head>
<body>
<div id="background-color-inherit">
<h3> Here is an example of background-color: inherit.</h3>
</div>
</body>
</html>
Result:
Here is an example of background-color: inherit.
Donate to support writers.
You may be interested in the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)