April 5, 2012
CSS Text on an Image
Question by DJ Howarth
I have the hardest time with CSS because it is so fickle it seems. Need to help with this.
I want my “section.png” image to be the Header Bar, which is clickable, and a table Expands and Collapses as you click the Header Bar.
<table width="100%">
<tr>
<td width=80% align=left>
<font color="white" size="4"><strong> General Airport Information</strong></font>
</td>
<td align=right><font color="white" size="2">
<div id='oc5' style="border-style: none; vertical-align:bottom;">
<img src="http://.../images/expand.png" width="15" height="15" style="border-style: none; vertical-align:top;"> Show
</div></font>
</td>
</tr>
</table>
</div>
^^^
Everything in the “Div” above needs to be on top of the section.png image.
^^^
<div id="id5" style="display: none">
<table width=80% align="center">
<tr align="left">
<td colspan="2" align="right">
Hidden text - Until Header Bar is Clicked.
</td>
</tr>
</table>
</div>
I have looked around for answers, regarding this issue. I know it has to do with CSS and float or position and absolute or relative. IDK, I cant figure it out. Can someone steer me in the right direction.
Answer by Starx
The correct way to do this, would be to set a background instead of adding a image element
<div class="parent" style="background: url('image.jpg'); height: 300px; width: 500px;">
<div class="text">...</div>
</div>
