Placing Text On A Picture Or Image


This effect is very easy using simple table codes. I will show you the code, and explain how it works.

    


This is my Grandson.


Now, before we go on, let's review the commands I used above. What we are doing is forming a table, with the photo as the background of the table itself. The text is the table data and we are simply telling the text where we want it, in relation to the background of the table.

Okay, if I've confused you a little now, let's look at the individual components of the code above, and this should make a little more sense.

The table background is the photo. You will need to know the size of the image and use the attributes as I have above. If the size is unknown, you can play with the numbers until you get the right size or go to my size it tool.

The border is optional. I have added it to demonstrate how it works. Without a border, it will simply appear as an unframed photo.

The tag is telling the browser that a table row is about to begin. This tag is necessary.

The tag is telling the browser that the next piece of information will be the top image, or text to be placed upon the table background.

The align="center" attribute tells the browser to display the table data in the center of the cell, or background.

The valign="bottom" tells the browser that in addition to centering the data, to also place it at the bottom of the table.

The font color and size commands need to be placed within the table code as demonstrated above.

Okay, now that we have covered some of the technical stuff, I'll show you some other examples to demonstrate how the table data can be manipulated.

This is my Grandson.


Here I have used the same code as above with valign="top"


This
Is
My
Grandson


Here I have used the same code as above with align="right" valign="top" so I have told the table data to place itself at the top of the table on the right side.

This
Is
My
Grandson


Here I used align="left" valign="bottom" I'll bet your getting the idea now, aren't you? Good, because now we're going one step further by placing text at the top, and the bottom.

This Is My Grandson
Michael


In this code you will need to remove the border option, or the cells will show a border. This involves two table rows with different valign values. Here is the code for the above effect.



This should get you started. You can use this effect on any Non-Animated image.

Have fun, and as always, if you need some help, feel free to email me... :-)
Back to www.clayparker.net