background-color property

Author admin Reading 2 min Views 516 Published by April 12, 2012 Modified by September 28, 2024

Contents

Definition and Usage
Syntax
Values
Examples
Compatibility
Desktop browsers
Mobile browsers

Definition and Usage

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

Initialtransparent
Applies toall elements
Inheritedno
Mediavisual
Computed ValueIf 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 rgb(0,0,0).
Animatableyes, as a color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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.

Examples

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

Compatibility

Desktop browsers

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0 (1.7 or earlier)	1.0	4.0	3.5	1.0 (85)

Mobile browsers

Feature	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0 (1.9.2)	(Yes)	(Yes)	(Yes)	(Yes)