html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS background-color property

Definition

The CSS background-color property allows us to assign a background colour to elements.

Applies To

All elements.

Property Values

color - Defines a colour for the background.

Valid values for color keywords are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy olive, orange, purple, red silver, teal, white and yellow.

Colours can also be expressed using hex notation or rgb formats.

inherit - The background-color properties are inherited from the parent element.

transparent - A transparent background.

Default Value

Default value is transparent.

Inheritance

The background-color property is NOT inherited from the parent element unless specified using the inherit property value.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS background-color property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS background-color Property</title>

<!-- Valid values for CSS background-color Property are:

     color and inherit and transparent.

--> 

<style type="text/css">

/* Set a border and padding and margins around images to 
   see the effects of background colours */
img {
	padding: 10px;
	margin: 10px;
	border: 1px solid black;
}

/* Background colour paragraph */
#para1 {
  background-color: aqua;
}

/* Background colour image */
#img1 {
  background-color: yellow;
}

/* Background colour image */
#img2 {
  background-color: orange;
}

/* Background colour image */
#img3 {
  background-color: red;
}

</style>

</head>
<body>
<h1>Looking at the CSS background-color Property</h1>
<p id="para1">Background colour used with some text.
</p>
<p>Background colour used with some images.
<img id="img1" src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Shepherds Pie" />
<img id="img2" src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Shepherds Pie" />
<img id="img3" src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Shepherds Pie" />
</p>
</body>
</html>

How It Looks

The results of using the background-color property with the values above will look something like the following:

notepad
background-attachment   << Prev       Next >>   background-image

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.