Making a Background Color Transparent

One thing I didn't introduce while discussing background colors is the value of TRansparent for the background-color property. There's a method to my madness, of course: I wanted to introduce background images so you could get the full value of this very important CSS option.

Example 8-6 describes the table used earlier, this time with a background image set for the body. You'll also notice that I've changed the .highlight class to have a background-color property value set to transparent.

Example 8-6. Setting up a transparent background color
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="">
<title>working with style</title>

<style type="text/css">
body {background-image: url(gray.jpg); color: white;}
caption {color: black; border: 1px solid black;}
table {border: 1px solid black; padding: 5px; width: 90%;}
th {background-color: #333;}
tr {background-color: #999;}
td {background-color: #ccc; border: 1px solid black;}
.highlight {background-color: transparent; color: orange;}



<table cellspacing="5">
<caption>Comparing weather and time zones</caption>
<th>Tucson, Arizona</th>
<th>Las Vegas, Nevada</th>
<td>Warm to Hot</td>
<td>Warm to Hot</td>
<th>Time Zone</th>
<td>No Daylight Savings</td>
<td  class="highlight">Mountain Standard Time</td>


As you can see, this allows the background behind the element to show through (see Figure 8-13).

Figure 8-13. The transparent value allows the background to show through the elementin this case, the table cell with the highlight class shows.