text *behind* an image?

[Cherubae]

I was thinking about making a page where the text and images would appear to blend into the background color when the page was scrolled up and down. The only easy way I could think of would be to put a gradient image that started w/ transparency and faded to the background color, then add in a background-repeat:repeat-x at the top of the page.

Img img img img

txt txt txt


The only prob w/ that is the text, by default when scrolled, would go over the top of the image instead of underneth it. Is there a way to place the image in the foreground (position:absolute or such) so that the text goes under the image when it's scrolled? Or is there an easier way of doing what I'm looking for using some other means :D

<edit>amazing what happens after you post the question after not finding it earlier... sheesh.. crazy murphy's law... I think I'm looking to use z-indexing for what i want to do :) I'll have to go give it a try </edit>

[Roy Sinclair]

z-index in indeed the tool for controlling which element displays over which. Be aware that "background" colors or images objects go behind all elements so there's no z-index value that will move anything behind the background.

[Cherubae]

Well... drat.. :( I tried a few things like putting the content div underneath a div w/ the gradient, but both scrolled together. Even tried the not-supported-by-all microsoft filter:alpha tag and that didnt work out too well either. I could prob find a javascript to make the gradient div from not moving, but it would probably just jitter down the page list most of the ones I've seen.

The only other way I can think of would be in Flash, and I would hate to have to encorporate an entire page in Flash :p Guess I'll have to do w/o the faded text :(

[justame]

che...
is it just a possible® to put the 'text' onnn the just a image® in just a faded® out kinda way n' thennn have that text/image just a scrolling® over your background???

just a nother® suggestion...

[Cherubae]

Unfortunatly not but thanks anyway :) I was hoping to take normal text and fade it into the background color of the page when the scrolled text reached the top of the window (and fade in from the background color when the text appeared at the bottom of the window)

http://www.fogu.com/hm4/text.htm

since IE doesn't support transparent png-24 images yet (GRRR!!) it looks a little wierd so I would have to tinker w/ the image (even though it works just fine in Net7 and Opera), but the idea is to make that top div stay put while the text moves underneath it, giving the illusion that it's fading into the background color :)

[justame]

Originally posted by Cherubae
take normal text and fade it into the background color of the page when the scrolled text reached the top of the window (and fade in from the background color when the text appeared at the bottom of the window)

but the idea is to make that top div stay put while the text moves underneath it, giving the illusion that it's fading into the background color :) [/B]


che...
k.../me gets whattt ya just a mean®...
sooo nowww tis it just a possible® to have just a background® for the 'scrolling' part youre just a reading® the 'text' from???

n' ifin' ya can set the properties??? thennn ya could have just a backgroundimage® thattt was more transparent @ the bottom vs having ittts transparency say 80% up top where ya wanttted the text to just a fadeout®???

just a nother® suggestion n' as just a lways®...guessin' alll the way thru...hehehe

[Cherubae]

Yep, that's exactly what I'm looking for :o the only prob is the image doesn't stay put and scrolls with the page so the text doesn't exactly "fade" since it doesn't move under the semi-transparent image :D