codescracker


css

CSS Background Color



« Previous Tutorial Next Tutorial »


The background-color Property

The background-color property is used to set the color of the background area on which an element is displayed. It can be applied to almost any element.

The background-color property takes any of the following three values:

An example of using the background-color property is given as follows.

h1 { background-color: #FFFFFF; }

Apart from the preceding three values, the background-color property can also take two more values. They are transparent and inherit.

When the value is set to transparent, the background color of the element becomes transparent to its parent element so that the background color of the parent element is visible through it.

It is important to note that the element does not take or inherit the color of the parent element; it just becomes transparent so that the background color of parent element is visible through it. Transparent is a default value, that is, if no value is set for the background-color property; it takes transparent as its default value.

When you set the value of the background-color property to inherit, it takes or inherits the color of its immediate parent elements.

Set Background Color of Web page

Here is an example shows how to set the background color of a web page using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Background Color Example</title>
	<style>
		body { background-color: #dedede; }
	</style>
</head>
<body>

<h2>CSS Background Color Example</h2>
<p>This is an example on CSS background color.</p>

</body>
</html>

Here is the sample output produced by the above CSS background color example code:

css background color

With CSS, a color is most often specified by the three methods give below:

In the example given below, the <h2>, <p>, and <div> elements have different background colors:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Background Color Example</title>
	<style>
		h1 { background-color: #dedede; }
		p { background-color: #ffeded; }
		div { background-color: #c0c0c0; }
	</style>
</head>
<body>

<h2>CSS background-color Example</h2>
<div>
	I am a text inside the div element.
	<p>I have my own background color.</p>
	<p>If you unset the paragraph color,
	then it will inherited the color of div.</p>
	I am still in the div element.
</div>

</body>
</html>

The above CSS background color example code will produce the following output:

CSS Different Background Color

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test