Hello all! Currently, I'm trying to make my first website for a club that I am in. Unfortunately, I'm getting very frustrated and confused. On my opening page I'm trying to put words over a picture that I found. I first put the picture into the "background" slot, but that ended up tiling the picture so that the words weren't visible. Then I put the picture into the "Main Image" slot and now the words are under the picture. Is there a way to fix this?
Thanks for the help!
Alex

There are several ways to do that.

1) Load your image into a graphics editing program like Paintshop Pro, Photoshop, Irfanview, Gimp etc. Then use the tools to put the text right on the image. This way is best since no matter what monitor resolution or browser your visitors are using the text will always be right on the image where you want it. DO THIS TO A COPY OF YOUR IMAGE NOT THE ORIGINAL.

2) You can create a table cell the exact size of your image. In the <td> or <table> tag you can put background="yourphotosnamegoeshere". Then in between the <td> and </td> you put the text you want over the image. I suggest you use a div tag there and use absolute positioning to get the text where you want it.

3) Do the same as above but use all div tags without a table. This way it will load faster and probably validate better especially in XHTML.

to continue on the 3rd option...

<div style="width:100px; height:100px; background-image: url(imagename.gif);">
text in here
</div>

change the 100 numbers and the imagename.gif to the correct values and you should be good to go.

I'm sorry. I should have been more clear about my text. The text that I want over the picture is actually links to other parts of my site. Can I still use the same kinds of codes? How does this work?
http://www.angelfire.com/oh5/dramaohs/
Here's what it looks like. Thanks.
Alex

give it a go and see if it works...

<div style="width:640px; height:426px; background-image: url(http://gallery.angelfire.com/photos/Backgrounds/Photographic_Borders/P0320939.JPG);">
<!--Links-->
<font size="5"><span style="width: 150; height: 50; font-size: 20px; font-family: verdana; color: #00FFCC; filter: blur(add = 1, direction = 220, strength = 10)">Links</span></font>
<p>
<a href="page2.html">Calendar</a><br>
<a href="page3.html">Important News</a><br>
<a href="page4.html">Current and Upcoming Plays </a><br>

<a href="page5.html">Past and Current Officers </a><br>
<a href="page6.html">About the Drama Teacher</a><br>
<a href="page7.html">Trips</a><br>
<a href="http://dramaohs.myphotoalbum.com/albums.php">Photo Gallery</a><br>
<p>
<!--EndLinks-->
</div>

It worked! Thanks so much. But how do I now center it onto the picture. It's a little too high. http://www.angelfire.com/oh5/dramaohs
Thanks again!
Alex

2) You can create a table cell the exact size of your image. In the <td> or <table> tag you can put background="yourphotosnamegoeshere". Then in between the <td> and </td> you put the text you want over the image. I suggest you use a div tag there and use absolute positioning to get the text where you want it.

if you use a div with absolute positioning, then the table has no use ..
so never use both in the situation you describe above, then go for two divs instead like suggested in this thread.

Hi. The one that pb&j worked better because the text I want over the picture is actually links. I just don't know now how to lower the links so that it it is in the center of the picture. Thanks.
Alex