Revision 21239 of background-color

  • Revision slug: CSS/background-color
  • Revision title: background-color
  • Revision id: 21239
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 2 words added

Revision Content

{{ CSSRef() }}

Summary

background-color sets the background color of an element, either through a color value or the keyword transparent.

  • {{ Xref_cssinitial() }}: transparent
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

background-color: color | transparent | inherit

Values

color 
The color can be specified as a hexidecimal RGB value, a regular RGB value, or by using one of the pre-defined color keywords.
transparent 
The default value for background-color is transparent meaning the element has no color of its own, instead showing the color of the element behind it.

Examples

{{ CSSRefExampleLink("background-color") }}

.exampleone {
	background-color: teal;
	color: white;
}

.exampletwo {
	background-color: rgb(153,102,153);
	color: rgb(255,255,204);
}

.examplethree {
	background-color: #666699;
	color: #FFFFFF;
}

Notes

(Add links to good colour reference sites here.)

Specifications

Browser Compatibility

TBD: This may be removed in favour of a centralized compatibility chart.

See Also

{{ languages( { "es": "es/CSS/background-color", "fr": "fr/CSS/background-color", "it": "it/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}

Revision Source

<p> {{ CSSRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>background-color</code> sets the background color of an element, either through a color value or the keyword <code>transparent</code>.
</p>
<ul><li> {{ Xref_cssinitial() }}: transparent
</li><li> Applies to: all elements
</li><li> {{ Xref_cssinherited() }}: no
</li><li> Percentages: N/A
</li><li> Media: {{ Xref_cssvisual() }}
</li><li> {{ Xref_csscomputed() }}: as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">background-color: <i>color</i> | transparent | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> color </dt><dd> The color can be specified as a hexidecimal RGB value, a regular RGB value, or by using one of the pre-defined color keywords.
</dd><dt> transparent </dt><dd> The default value for <code>background-color</code> is <code>transparent</code> meaning the element has no color of its own, instead showing the color of the element behind it.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{ CSSRefExampleLink("background-color") }}
</p>
<pre>.exampleone {
	background-color: teal;
	color: white;
}

.exampletwo {
	background-color: rgb(153,102,153);
	color: rgb(255,255,204);
}

.examplethree {
	background-color: #666699;
	color: #FFFFFF;
}

</pre>
<h3 name="Notes"> Notes </h3>
<p>(Add links to good colour reference sites here.)
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<p>TBD: This may be removed in favour of a centralized compatibility chart.
</p>
<h3 name="See_Also">See Also</h3>
<ul> <li>{{ CSS_Reference:Background() }}</li> <li><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></li>
</ul>

<p>{{ languages( { "es": "es/CSS/background-color", "fr": "fr/CSS/background-color", "it": "it/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}</p>
Revert to this revision