CSS Background-color Property

The background-color property specifies the color of the background. This property takes values in the following forms:

• Transparent
• Hexadecimal code
• Color name
• RGB
• RGBa
• HSL
• HSLa

Both RGB and HSL use three numbers to determine the color. RGBa and HSLa add a fourth number to indicate the level of transparency, with 0 being fully transparent, and 1 being fully opaque.

The syntax for the background-color property is as follows:

Transparent:

{background-color: transparent;}

Note that transparent is the default value for background-color. Also, transparent is treated as a color.

Hexadecimal code:

{background-color: #XXXXXX;} where XXXXXX is a hexadecimal code.

Color name:

{background-color: [color_name];} where color_name denotes the name of the color in plain English.

RGB:

{background-color: rgb (X, Y, Z); }   where X, Y, and Z are numbers between 0 and 255.
    OR
{background-color: rgb (X%, Y%, Z%); }   where X, Y, and Z are numbers between 0 and 100.

RGBa:

{background-color: rgba (X, Y, Z, A); }   where X, Y, and Z are numbers between 0 and 255, and A is a number between 0 and 1.
    OR
{background-color: rgba (X%, Y%, Z%, A); }   where X, Y, and Z are numbers between 0 and 100, and A is a number between 0 and 1.

HSL:

{background-color: hsl (X, Y%, Z%); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100.

HSLa:

{background-color: hsla (X, Y%, Z%, A); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100, and A is a number between 0 and 1.

Several examples are shown below:

CSS Declaration	Output
p { background-color: #00FF00; }	Green Background
p { background-color: red; }	Red Background
p { background-color: rgb(255,255,0); }	Yellow Background
p { background-color: hsla(30,100%,50%,1); }	Orange Background