CSS Background Color Property

Last Updated Jul 21, 2015, 12:00:06 PM





CSS Background Color Property

The CSS background-color property sets the background color of an element, either through a color value or the keyword transparent.
Syntax
Values

<color> Is a CSS <color> that describes the uniform color of the background. Even if one or several background-image are defined, this color can be affect the rendering, by transparency if the images aren't opaque. In CSS, transparent is a color.

Definition and Usage

Initial Value transparent
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited no
Media Visual
Computed Value If the value is translucent, the computed value will be the rgba() corresponding one. If it is not computed then it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animatable Yes, as a color
Canonical Order The unique non-ambiguous order defined by the formal grammer
Example


Watch GIF Try It Now


Setting CSS Background Color with HEX Values

You can actually use the HEX values to set the CSS colors

HEX value - like "#ff0000" RGB value - like "rgb(255,0,0)" color name - like "red"

Lets see an example to understand more about setting colors in CSS using HEX values


Watch GIF Try It Now

CSS Advanced Background Color Values

Setting CSS Background Color With RGB Values


The above css background-color example will produce the following output

setting css background color with rgb

Watch GIF Try It Now

Setting CSS Background Color with HSL or HSLA

HSL or HSLA color values.



The above css background hsla example will produce the following output

setting css background color with hsla

Watch GIF Try It Now

If we don't specify a background hsla color, the element by default will have a transparent background



Note:

In IE8-9, there is a bug where a computed background hsla color of transparent causes click events to not get fired on overlaid elements.



Using CSS multiple backgrounds

With CSS3, applying multiple backgrounds is pretty easy. You can just apply one style to the top element and another background color style to the backside element.

Specifying multiple backgrounds is easy:

You can do this with both the shorthand background property and the individual properties

Example

In this example, three backgrounds are stacked: the Firefox logo, a linear gradient, and an image with flowers:



Browser compatibility
Feature
Basic support 1.0 1.0 (85) 1.0 (1.7 or earlier) 3.5 4.0 [1] Yes Yes


Practice with Our Interactive Live Editors and Take your CSS Skills to the next level

Example 1 Example 2 Example 3 Example 3

Other CSS Background Properties you might want to Learn

CSS Background Image Property

CSS Background Repeat Property

CSS Background Attachment Property

CSS Background Properties



Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM