background-color

The background-color CSS property sets the background color of an element. If an image is present, the color covers painted area behind the image.

Values of background-color

<color>
color: <keyword>| rgb() | rgba() | hsl() | hsla() | currentColor | transparent | hex | inherit

The initial value: transparent.

<keyword>name of the color –  case-insesitive identifiers which represents a specific color, e.g green, black, white, Crimson

rgb() – red-green-blue model (RGB) – rgb(r, g, b)- e.g.  for ‘crimson’ – rgb(220, 20, 60).

rgba() – RGBa extends the RGB color model to include the alpha channel ( the transparent canal), for crimson with opacity 0.5 – rgba(220, 20, 60, 0.5).

hsl() – hue-saturation-lightness model (HSL), for a red color: hsl(360,100%,50%).

hsla() – HSLa extends the HSL color model to include the alpha channel, for a blue color with  an opacity 0.4: hsla(240,100%,50%, 0.4).

currentColor – the keyword which allows to set the parent background color on its child.

transparent – represents a fully transparent color.

hex – RGB hex values e.g. for crimson #DC143C.

div {
    background-color: #DC143C;
}
Example of setting the background color to crimson with the hex value:#DC143C;

Related

Resources

Browser compatibility

background-color

Internet Explorer
4.0
Firefox
1.0
Chrome
1.0
Safari
1.0
Opera
3.5
Mobile
Safari Mobile
works
Android
works
Chrome Mobile
works
IE Phone
works
Opera Mini
works
Opera Mobile
works

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.