Place text on an image

[Naoise]

<table>
<tr>
<td><img src="foo.gif"></td>
</tr>
</table>

How would I place some text on foo.gif via CSS? I can also go with the following model and try and place text with absolute positioning in the cell.

<table>
<tr>
<td background="foo.gif"></td>
</tr>
</table>

Any help appreciated.

 

[monksnake]

Your second idea is more like it, making the background the image you want. I recommend putting the image in a <div> though, inside that <div> put another block level element that will contain the text and absolute position it:

<table>
<tr>
  <td>
     [!]<div style="background:url(foo.gif)">
           <p style="positioning:absolute; top:2px; left:10px">   
              blah blah
           </p>  
     </div>[/!]
   </td>
</tr>
</table>

That should be all you need.


[small]"Mom........MEATLOAF!!!! F***!!!!"[/small]
<.

 

[vacunita]

In your first method you can{t really unless you absolutely position a dic on top of the image.

In our second method just placing text between the <td></td> tgs will place the text on top of the image. However, i would not use a table but rather a div for this purpose:

<div style="width:250px; height:250px; background:URL(foo.gif);">
[red]This text will appear on top of foo.gif[/red]
</div>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.