CSS background color properties

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

Background color properties

CSS background-color property sets background color of an HTML element.

Syntax:

background-color: color | transparent | inherit

Values

color : The color can be specified as a valid keyword (like red, teal), a hexadecimal value or a RGB value.

transparent : If set, the element itself does not have any color. It shows the color of the element behind. This is the initial value of the background-color property.

inherit : If set, the associated element takes computed value of its parent element's background-color property.

Applies to

background-color property can be applied to all HTML elements.

Inheritance

If no value specified, the background-color property does not get the computed value of its parent element.

Percentages

Not available.

Media

visual.

Computed value

As specified.

Browser compatibility

Browser	Version
Internet Explorer	4.0 and above
Firefox (Gecko)	1.0 and above
Opera	3.5 and above
Safari (WebKit)	1.0 and above

Example of background-color property when value="color"

CSS code:

.firstline {background-color:#EFFFFF }
.secondline {background-color:#FFF6CF }
.thirdline {background-color:#FFEFEF }

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-color property when value="color" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-color-property-when-value-color.css">
</head>
<body>
<p class="firstline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="secondline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="thirdline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

View this example in a separate browser window

Example of background-color property when value="color".

Example of background-color property when value="transparent"

CSS code:

 body  {background-color:#EFFFFF }
p {background-color: transparent}

HTML code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-color property when value="transparent" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-color-property-when-value-transparent.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

View this example in a separate browser window

Example of background-color property when value="transparent".

Example of background-color property when value="inherit"

CSS code :

 body  {background-color:#EFFFFF }
p {background-color: inherit}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-color property when value="inherit" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-color-property-when-value-inherit.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

View this example in a separate browser window

Example of background-color property when value="inherit".

CSS background color properties

Background color properties

See also