CSS Background-color Property



CSS Tutorial  >  Background   >   Background-color

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  

Next: CSS Background-Image




Copyright © 2024   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact

AdBlock Detected!

Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.