Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

Your Search Results



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


    • Initial value *Value 'initial-background-color' not found in DB*
    • Applies to all elements. It also applies to ::first-letter and ::first-line.
    • Inherited *Value 'inherited-background-color' not found in DB*
    • Media *Value 'media-background-color' not found in DB*
    • Computed value If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, 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 grammar


    Formal syntax: Syntax not found in DB!
    background-color: red;
    background-color: rgb(255, 255, 128);
    background-color: hsla(50, 33%, 25%, 0.75);
    background-color: currentColor;
    background-color: transparent;
    background-color: #bbff00;
    background-color: inherit;


    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.


    View the live example

    .exampleOne {
    	background-color: teal;
    	color: white;
    .exampleTwo {
    	background-color: rgb(153,102,153);
    	color: rgb(255,255,204);
    .exampleThree {
    	background-color: #777799;
    	color: #FFFFFF;
    .exampleFour {
      background-color: hsla(300, 20%, 50%, 0.8);
      color: hsla(60, 100%, 90%, 0.8);


    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'background-color' in that specification.
    Candidate Recommendation Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color>
    CSS Level 2 (Revision 1)
    The definition of 'background-color' in that specification.
    Recommendation No change.
    CSS Level 1
    The definition of 'background-color' in that specification.

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 (1.7 or earlier) 1.0 4.0 [1] 3.5 1.0 (85)
    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 (1.9.2) (Yes) (Yes) (Yes) (Yes)

    [1]: In IE8-9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements. See the click event documentation for details.

    See also