CSS background-color

Please Share On:

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.

  1. Color
  2. HEX value
  3. RGB value
  4. RGBA value
  5. HSL value
  6. 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:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial