View Full Version : text behind a picture


wayward
02-16-2003, 12:03 AM
obviously, i need help :P

i'm currently trying to redesign my webpage so that there's an image that goes over everything, and the text and content of the webpage appear in the transparent area of the picture.

i'm currently using frontpage, but if need be i'll use good ol' notepad like i used to. any ideas? did i even make myself clear?

thanks

Alcy
02-16-2003, 12:19 AM
Something like this?

<img src="IMAGE.GIF">

<div style="position:absolute; top:#px; left:#px; width:#px; height:#px;">

text here.

</div>

If you change the values for top and left, you can get the text to appear anywhere you want :).

wayward
02-16-2003, 12:24 AM
not quite unfortunately...what i want is for the text to dissapear behind the image except for in the transparent areas.

i hope that makes it more clear :)

bejayel
02-16-2003, 01:48 AM
an example would be really nice. but if you are trying to do what i think you are. just type the text, then place the image over it using stylesheets.

lefty
02-16-2003, 01:52 AM
You'll have to use divs and stuff... I once did it by using 2 seperate images, one of which went over the div with the text... here, this thread kind of explains it better. :P
http://www.lissaexplains.com/forum/showthread.php?s=&threadid=26422&highlight=zindex

wayward
02-16-2003, 02:26 AM
lefty: once again, you are my HERO :)

though now i'm having another problem, i cannot interact with the links and stuff in the text and stuff behind the transparent part of the picture. any ideas for that?

wayward
02-16-2003, 02:43 AM
Seeing your whole code could still help us out though..the more details you give us the easier it is for us to help.
But i think maybe you'll need to use the z-index tag to do what your talking about...

<DIV id="name" style="position: absolute; top: 100px; width:100px; left: 100px; z-index:2" align=left>Image code </DIV>
<DIV id="name" style="position: absolute; top: 100px; width:100px; left: 100px; z-index:1" align=left> Your text</DIV>


Obviously you can change the code so its how you want it, so long as you use the z-index part...that code above is basically telling the image to be above the text...the higher the number you give something the higher it'll be...does that make sense?


by the way, here's the post that i'm working from. i have text under the image now, which is great -- i just want to have my webpage content under there...such as scrolling page and links and stuff, and that isn't working.

lefty
02-16-2003, 02:57 AM
Yay, I'm someone's hero! :P

I haven't tried it, but maybe put an iframe in the div? It might work. Is this page uploaded somewhere? Maybe we could see it and figure something out, too. :)

wayward
02-16-2003, 03:17 AM
i'll attempt to upload...but actually i first noticed it when the iframe wasn't working...

well what do you know? now i can't even upload at all because the name server is no longer valid...well then, doesn't my account last for another 2 months?

wayward
02-16-2003, 03:29 AM
here's a look at what i'm attempting to do (http://theclosedwindow.tk/testing.html) ...my code was never that neat, but notice that you cannot interact at all with the i-frame.

any help would be appreciated.

thanks, sorry that it seems like i'm spamming post.

lefty
02-16-2003, 03:48 AM
ohhh I see. Hmm. My guess is you'll have to cut up the image and use a table or something to put it together.... I know it's possible, I just have to think of how. :P

wayward
02-16-2003, 06:27 AM
i was hoping i wasn't going to have to do that, but i guess there's a little more time/fun i'll be having. WEE!

well, at least it looks pretty...i didn't want to depart too much from my previous layout.

lefty
02-16-2003, 03:15 PM
The only issue, really, is it can't be a graphic in the middle there (as we've learned, seeing it won't scroll or anything. :P). You could probably just cut it into two pieces - the top & the bottom - and connect them together, it's probably not too difficult.

wayward
02-16-2003, 07:11 PM
well, i had to slice up my picture into 6 different parts, but now i have the basic thing working -- including image maps and the iframe :)

of course, now i'll have to reformat the page so that some info isn't stuck behind stuff, but that shouldn't be too hard.

for now though, well...have a look! (http://theclosedwindow.tk/newindex.htm)

thanks for all of you all's help :)

edit: oh yeah, i still have to fix it up for those of you who use 800x600...but that shouldn't take nearly as long now.

bejayel
02-16-2003, 10:39 PM
some of your links in the howto.html are still covered up b the image. just thought i would let you know.

wayward
02-17-2003, 01:51 AM
yeah, i still have more work to do on it, that's why it hasn't actually hasn't gone live yet...wee :)