background-color - HTML CSS CSS Property

Description

The background-color CSS property controls the element background color.

You can set color either through a color value or the keyword transparent.

The background of an element includes padding and border but not the margin.

The following table summarizes the background-color property.

Item	Value
Default value:	transparent
Applies to:	All elements
Inherited:	No
Animatable:	Yes.

Syntax

The syntax of the property is as follows:

background-color:      color | transparent | initial | inherit

Property Values

The following table describes the values of background-color property.

Value	Description
color	Sets the background color.
transparent	Sets the background-color to transparent. This is default.
initial	Sets this property to its default value.
inherit	takes the value from its parent element background-color property.

The example below shows the background-color property.

Example

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS background-color property</title>
  <style type="text/css">
        body {<!--  w w  w  .  j a  v a 2 s .co m-->
      background-color: yellow;
    }
    h1 {
      background-color: rgb(255,0,0);
    }
    p {
      background-color: #00ff00;
    }
    </style>
 </head>
 <body>
  <h1>This is a heading.</h1>
  <p>This is a paragraph.</p>
 </body>
</html>