On this page ...

Putting a text over an image ... So why should I? Well, suppose you are creating 16 buttons on your webpage, all pointing to different pages. You could draw an image for each and every button, or ...

The trick of putting a text over an image

Now this is a bit tricky when you first start with it, but it's not that hard once you get the idea.

What you need to do is first make a table (in the example I use a one-cell tabel):

Each cell of the table can be given a background image.
So let's find us a picture. I called mine "blue_button.gif" and it looks horrible, to convince you take a look at it:

The dimensions of this image are width=100 and height=30. Don't forget these numbers now !

Next step is to adjust the table to the size of the image.
The cell above aparently doesn't match, so let's see how the code looks like and what it should be:

<table width="38%">
<tr>
<td>a sample cell...</td>
</tr>
</table>

The problem 1 is the size, expressed in percentages, which will almost never match the size you need. The next problem is that border, which we do not want. Alter the code using the dimensions of the image:

<table width="100" border="0" cellspacing="0" cellpadding="0" height="30">
<tr>
<td></td>
</tr>
</table>

We're not done yet,... where is the picture ?
Well, now we add the picture as a BACKGROUND PATTERN for the cell, as such:

<table width="100" border="0" cellspacing="0" cellpadding="0" height="30">
<tr background="blue_button.gif">
<td></td>
</tr>
</table>

which will result in a cell with the image as background (unfrotunally, since a lot of browsers do not support tables within tables with cells with different background, I cannot show you this). Now we can add text to the cell. You can change the text just as you would change regular HTML text. For example: link, bold, veranda, white, centered.

And this is how it's done,... easy once you know it isn't it... ?

Note: some browsers do not support a table within a table having a different background !