text box on images..?

[Resshin]

how do you make a text box on the image. It's not exactly on the image, but its under the image. err...its hard to explain :confused2 ....any help if you understand?

[Canuckkev]

You could make a table and set the image as the background, then put the textbox in it.

[bigperm]

Just use CSS to have the image as the background for the CSS

input {background-image="file.ext"}

[meow]

Sorry, but that should be:
whatever { background-image: url(pic.gif) }

What you want can be done several ways Resshin. Explain a little more.

[Resshin]

..for example..i want to use this picture...and on the bottom right corner..i want to put a text box there. with out using that pic as a background...err....if i can find a site that has an example, i'll show u....i know its possible but i forgot where i've seen it

pic ture
http://www.geocities.com/cutegirls21c/scvault.txt

and i also want to use the words on the picture as links...which i know how to do...but the text box thing i don't

[meow]

Isn't much room for text there...Do you mean that you want the whole thing, text + image to be a graphic or do you want the text (in code) placed on top of the image?

[Resshin]

text on top...

what size do you reccomend my image to be...i agree this is too small..it is 800X600 right now

[meow]

Huh? The one you linked to is 110*23???

You could use realive positioning to move some text over the image. If it's 800*600 this doesn't seem like a good idea though. :p

Try this just to see what I mean (needs to be hided from Netscape4x).

<style type="text/css">
<!--
#textbox img { vertical-align: bottom }
#textbox span { position: relative; left: -110px; color: #0000ff; background: #ffffff none; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold }
-->
</style>

<p id="textbox">
<img src="scvault.jpg" width="110" height="23" alt=""><span>Yadda yadda yadda yadda</span></p>

[Resshin]

..hmm...i just clicked the link...did you see a 9cy imgae thing....thats not the image....i'll fix it...

[Resshin]

try it now

[meow]

Well, that was different. :p
That will kind of be the whole page, right? In that case you can as well position absolutely and Netscape4 will get it too if you keep to "top" and "left".

(Add font aso and change position to what you want)

#image { position: absolute; top: 0; left: 0; z-index: 1 }
#boxtext { position: absolute; top: 200px; left: 100px; color: #ffffff; z-index: 2 }


<div id="image">
<img src="scvault.jpg" width="800" height="600" alt=""></div>

<p id="boxtext">
Yadda yadda yadda yadda...</p>

[Resshin]

thanks alot!!! :D

[Resshin]

umm..for future refrence..how do i determine where to put the text box?

[meow]

So that was what you wanted. ;)

This part:
#boxtext { position: absolute; top: 200px; left: 100px.....

From the top and left of the viewport (in this case). You may want to give the #boxtext a width and height if you are going to use background color and/or want parts of the big image to be clickable.