CSS background-color

The background-color CSS property sets the background color of an element. The background color layer is behind the background image (if there is any), which is in turn behind the content of the element. It paints the content, padding and border areas by default, but never the margin area.

background-color: color|transparent
background-color: #23d447;
background-color: rgb(60, 240, 60);           /* red green blue [0-255] */
background-color: rgba(70, 80, 180, 0.8);     /* opacity [0-1] */
background-color: hsl(300, 80%, 90%);         /* hue[0-360] saturation[0%-100%] lightness[0%-100%] */
background-color: hsla(300, 80%, 90%, 0.8);   /* opacity [0-1] */

color may be specified as a hex value (eg. #ff0000), RGB color (eg. rgb(255, 0, 0)) or HSL color (eg. hsl(0,100,100)). rgba and hsla allow for transparency. There's no difference in the range of colors available using either one. Hex and HSL are just convienent ways of representing RGB colors.

Browser Support: Full, except for IE8 and below which do not support hsl, hsla and rgba.

Colors in CSS

There are three ways to specify a CSS color: RGB, HEX and HSL coordinates. The three can specify the same array of colors, or gamut. The only reason to use one over the others is convenience and browser support.

  • hex. The most common, traditional and supported way. The RGB componentes are specified in hexadecimal base, prefixing them with a # (eg. #ff0000).
  • rgb. Red, Green and Blue components ranging from 0 to 255. Full support.
  • hsl. The friendliest way of specifying colors. Coordinates are Hue (0 to 360), Saturation (0% to 100%) and Lightness(0% to 100%).

Here's a color picker which takes RGB, HEX and HSL. Play with H, S and L and you'll see that it's pretty intuitive, except for hue that is. It is common though, to work with similar Hues but varying Saturation and Lightness. RBG and HSL support transparency with a fourth parameter called alpha. HEX colors do not allow for transparency.

Transparency with rgba and hsla

rgba and hsla are color values which have a fourth parameter called the alpha channel. It gives the color transparency and takes values from 0 to 1. A value of 0 gives full transparency and 1 a solid opaque color. Note that the contents of the element are not affected.

.parent {
background-image: url('leaves.jpg'); padding: 20px;
} .child {
background-color: rgba(0,0,0,0.5);
This div is semi-transparent. Keep in mind that rgba doesn't work in IE8- and always provide a fallback.

What is the background?

The background paints the content, padding and border areas by default:

div.container {
margin: 30px; border: 10px dashed orange; padding: 30px; background-color: green;

The background-clip property allows to customize the painting area of the background.

The Background of Inline Elements

For inline elements, the background area includes the text area and any padding. The line-height property doesn't affect the height of the background area.

span.example {
background-color: orange; padding: 5px; line-height: 50px;
This is a span. The background covers the height of the font plus any padding.

background-color and background-image

All elements have a background-color and a background-image property which are independent from each other. In fact an element may have a stack of background images, but only one background color. The background color is always behind any background images. The background property is a shorthand which allows setting both color and image(s) at the same time. CSS gradients are managed internally as background images so they play by the same rules.

.example {
background-color: #4c9ee3; background-image: url('duck.png'); background-repeat: no-repeat; background-position: center;

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>