Background Erased When class overlayed.

Here are the <div>'s I am dealing with:

#centered{
	 background-image:url(../Images/style_images/header_bground.gif);
    width:755px;
    margin-left:auto;
    margin-right:auto;
}

#content{
	background-color:transparent;
	float:left;
	height:100%;
	padding:5px;
	width:540px;
}

.text{
	background-color:transparent;
	color:#29527B;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:4px;
	text-align:left;
	width:500px;
}

Here is the code:

<div id="content">
			<div class="text">
		    <strong>Yankee Equipment Systems, Inc</strong><br />
            P.O. Box 630 (Mailing) <br />
            US RT. 4 &amp; Glass Lane (Physical)<br />
            Barrington, NH 03825 <br />
            (603)868-6691 (Local)<br />
            (800)239-9265 (Toll Free - Office)<br />
          (800)554-9265 (Toll Free - Parts and Service)</div>

It appears that the overlapping <div class'="text>'s background transparent propertly is making the page background disapear. Can I only use that property once?