{"id":7633,"date":"2011-04-13T08:01:00","date_gmt":"2011-04-13T08:01:00","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/uncategorized\/how-to-use-text-over-images-with-html\/"},"modified":"2021-04-23T21:23:49","modified_gmt":"2021-04-23T21:23:49","slug":"how-to-use-text-over-images-with-html","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/design\/how-to-use-text-over-images-with-html\/","title":{"rendered":"How To Use Text Over Images with HTML"},"content":{"rendered":"

Now and again I wonder if people are reading all of the stuff I write. When I put up the last FAQ page, I answered a question from a reader about putting text over an image. She wanted to be able to put the name of the person in the picture on top of the picture, like a caption. I said that it couldn’t be done without the use of a graphics editor. Well — KaBoom! The e-mail poured in.<\/p>\n

Yes, people are reading. I will take the weasel road right now and say that when I answered the question, it was correct. Now the variables have changed out right from under me and the Version 4.0 browsers have offered a couple of different ways to do it. Here I’ll outline three. <\/a><\/p>\n

The Easiest Way I Know To Put Text Over an Image<\/h2>\n

Here you go, text over a stunning image of yours truly:<\/span><\/p>\n

 <\/p>\n

<\/p>\n\n\n\n
  Joe Burns at Work<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/center><\/p>\n

Like the new haircut? Most of the top is gone as well as most of the beard. I thought about getting a new character for the home page, but I still like the old one.<\/p>\n

Before we get into the how’s and why’s of this method, I wanted to let you know that the images on this page were taken using my new digital camera. It’s really an amazing item. It holds a 3.5 inch floppy disc right in the body of the camera itself. When you snap a picture, it writes it to the disc in JPEG format so you can go right to the Net. Not only that, but you can also view the images as soon as you take them. That way you can quickly tell if someone blinked her or his eyes or not. If it’s a bad shot, erase it and take another one. Smooth, but a little steep. Mine was just over $500. (My wife gasped as I handed over the credit card.) There are cheaper ones, but not with the disc right on board. I still think it was a good buy. Now…<\/p>\n

The HTML Code That Did It<\/h2>\n

<\/p>\n\n\n\n
<TABLE BORDER=”0″ cellpadding=”0″ CELLSPACING=”0″>
<TR><\/p>\n

<TD WIDTH=”221″ HEIGHT=”300″ BACKGROUND=”newjoe01.jpg” VALIGN=”bottom”><\/p>\n

<FONT SIZE=”+1″ COLOR=”yellow”>Joe Burns at Work<\/FONT><\/TD><\/p>\n

<\/TR>
<\/TABLE><\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/center><\/p>\n

Here’s What’s Happening Within the HTML<\/strong>
 <\/span><\/h2>\n

I got the effect using a single table<\/a> cell, adding a background<\/a>, and then some text. Like so:<\/span><\/p>\n