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
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
The cell above aparently doesn't match, so let's see how the code looks
like and what it should be:
<td>a sample cell...</td>
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
border="0" cellspacing="0" cellpadding="0"
We're not done yet,... where is the picture ?
Well, now we add the picture as a BACKGROUND PATTERN for the cell, as
<table width="100" border="0"
cellspacing="0" cellpadding="0" height="30">
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 !