Abakada: Back to Basics > Language References > CSS Properties > Color and Background Properties > background-color Property

---

Sets or retrieves the color under the content of the object.

CSS	{ background-color: transparent | strColor }
Script	object.style.backgroundColor = transparent | strColor

transparent	The color of the next parent background will shine through.
strColor	Any of the range of values specified in the Color Table.

The property is read/write with a default value of transparent. This attribute is not inherited.

This property may be set together with the other background properties using the background composite property.

The sample below demonstrates use of embedded and inline style definitions to specify the background-color attribute of different elements on a page.

<style type="text/css">
<!--
   body {
      background-color: ghostwhite }
   ul {
      font: 11pt; text-align: left;
      background-color: lightsteelblue; padding: 10;
      margin-left: 10%;margin-right: 10% }
   table {
      background-color: beige }
   th {
      background-color: darkslategray; color: khaki; padding: 10 }
-->
</style>
...
<div class="back" style="background-color: aliceblue">
   <h1 style="background-color: dimgray; padding: 5"> ... </h1>
   <table>
   <tr>
      <td rowspan=2 style="background-color: #cc9"> ... </td>
   </tr>
   </table>
</div>

 Show me 

The sample below uses inline event handlers to dynamically change an object’s background color in response to mouse events.

<p onmouseover="this.style.backgroundColor='#7be'"
   onclick="this.style.backgroundColor='#7bb'"
   onmouseout="this.style.backgroundColor='transparent'">
   ...
</p>

 Show me 

The following example allows a user to preview various text and background color combinations. This feature requires Microsoft^® Internet Explorer^® 4.0 or later.

 Show me 

background, background-attachment, background-image, background-position, background-repeat