Placing Text On Top of An Image

It is possible to place text on top of an image using tables. The image you would like to be in the background of your text is used as a "background" in a <table>.

This lesson will work fine with Internet Explorer and MSNTV but not with Netscape.

Note: Netscape users can put text on an image using tables if they use the image as a background in a "table cell <td>" but will have to put all the text or other images also in that same cell (it can be hard to align the text an other images this way but it can be done).

The most imortant thing to remember to do is to add the width and height of the image to be used as the background image. This will define the available space you have when you align your text on top of the background image.

Below is a table with a background image with text on top of the image. Use the table cell alignment attributes to align the text where you would like it to be placed on top of the image.

The Lovely Lady Draas At Sunrise On The Mexican Riveria !

Here is the table code for the above example.

<table cellpadding="7" cellspacing="0" border="0" background="draassunrise.jpg" width="475" height="312">
<tr><td align="left" valign="bottom">
<font size="2" color="#ffff00" face="verdana"><b>
Lovely Lady Draas<br>
At Sunrise On The<br>
Mexican Riveria !
</b></font>
</td></tr></table>

Below is a more elaborate example of text on top of an image, you will see that I used a CSS style code for some of the text. I also added an image on top of the background image. You can even create clickable items on your background image.

Sunrise in Playa Del Carmen Mexico. It can be the most beautiful part of the day. The Lovely Lady Draas At Sunrise On The Mexican Riveria ! Draas & Draac Click This Little Picture For Another Example Here is the table code for the above example. You will notice that I used a Clear Image in the table code below to help with the placment of my text and images. I have spaced the table code below out a bit so it is easier for you to see what's going on.

<b> Sunrise in Playa Del Carmen Mexico. It can be the most beautiful part of the day.
Lovely Lady Draas At Sunrise On The Mexican Riveria !	Click This Little Picture For Another Example

Here is the table code for the above example. You will notice that I used a Clear Image in the table code below to help with the placment of my text and images. I have spaced the table code below out a bit so it is easier for you to see what's going on.

<table cellpadding="7" cellspacing="0" border="0" background="draassunrise.jpg" width="475" height="312">
<tr><td align="center" valign="top" colspan="2">

<font size="2" color="#ffffff" face="verdana" style="background-color: #dc143c;">&ltb>
Sunrise in Playa Del Carmen Mexico.
It can be the most beautiful part of the day.
</b></font>

</td></tr>
<tr><td align="center" valign="middle" colspan="2">

<img src="clear.gif" width="1" height="125">

<tr><td align="left" valign="middle">

<font size="2" color="#ffff00" face="verdana"><b>
Lovely Lady Draas<br>
At Sunrise On The<br>
Mexican Riveria !
</b></font>

</td><td align="right" valign="middle">

<a href="tables-text-on-an-image2.html">
<img src="draacmexthumb.jpg" width="75" height="51" border="0" alt="Draas & Draac">
<br>
<font size="1" color="#ffffff" face="verdana"><b>
Click This Little Picture
For Another Example
</b></font></a>

</td></tr></table>