CSS background-color Property

Definition and Usage

background-color This attribute sets the background color of the element.

Scope of Element Background

background-color to set a solid color for the element. This color will fill the content, padding, and border area of the element, extending to the outer boundary of the element's border (but not including the margin). If the border has transparent parts (such as a dashed border), the background color will show through these transparent parts.

transparent value

Although in most cases, it is not necessary to use transparentHowever, if you do not want an element to have a background color and also do not want the user's browser color settings to affect your design, then set transparent Values are still necessary.

See Also:

CSS Tutorial:CSS Background

HTML DOM Reference Manual:backgroundColor Property

Example

Set background color for different elements:

body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

Try It Yourself

CSS Syntax

background-color: color|transparent|initial|inherit;

Attribute Value

Value Description
color_name Specifies the background color with a color name (e.g., red).
hex_number Specifies the background color with a hexadecimal value (e.g., #ff0000).
rgb_number Specifies the background color with the rgb code (e.g., rgb(255,0,0)).
transparent Default. The background color is transparent.
inherit Specifies that the background-color property should inherit the setting from the parent element.

Technical Details

Default Value: transparent
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.backgroundColor="#00FF00"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5