Lynxsia IT Solution

CSS Background Color

Previous Next

CSS Background Color

CSS background-color property is used to set background color of and element.

Background Color Values

The background-color property can have any value from CSS color

Color name such as red, black, etc.

RGB and RGBA color value such as rgb(2, 52, 255), rgba(2, 52, 255, 0.56), etc.

HEX and HEXA color value such as #da3eff, #ae24eeff, etc.

HSL and HSLA color value such as hsl(263, 19%, 18%), hsla(309, 23%, 57%, 0.6), etc.

transparent to make background transparent (Default).

currentcolor to make background color as current color.

inherit to make background color inherit from parent.

initial to make background color initial as browser default.

revert to make background color same as it would be if no changes were made.

revert-layer to make background color same as back to the previous value.

unset to make background color same as parent (like inherit) and if not inherited then back to browser default (like initial).

					 
        
          /* Color Name */
          background-color: red;
          background-color: black;

          /* RGB and RGBA */
          background-color: rgb(2, 52, 255);
          background-color: rgba(2, 52, 255, 0.56);

          /* HEX and HEXA */
          background-color: #da3eff;
          background-color: #ae24eeff;

          /* HSL and HSLA */
          background-color: hsl(263, 19%, 18%);
          background-color: hsla(309, 23%, 57%, 0.6);

          /* Special keyword value */
          background-color: transparent;
          background-color: currentcolor;

          /* Global keyword value */
          background-color: inherit;
          background-color: initial;
          background-color: revert;
          background-color: revert-layer;
          background-color: unset;

          /* Multiple backgrounds */
          background-color: red, green;

Test Code Online

See our CSS Color Tutorials

Use our color generator tool to genereate colors in RGB, RGBA, HEX, HEXA, HSL, and HSLA

View CSS PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on: