mozilla
Your Search Results

    background-color

    Summary

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

     

    Syntax

    Formal syntax: <color>
    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
    

    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.

    Examples

    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);
    }
    
    

    Specifications

    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.
    Recommendation  

    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