Drawing An Image Layered Ontop Of Everything Else

[Kibble]

Hey everyone,I'm trying to figure out how to have an image draw ontop of all of the other content, and A site with the effect I'm looking for is this:http://www.artexfab.thornleyhayne.com/catt...omfort-zone.phpNotice how the banner is drawn ontop of the content page, and when the user scrolls up and down, it fades into the banner? That's the effect I'm looking for.I tried to break down their code but got lost. :> Does anyone know what parameters I need to set to have an image behave like that?As an example, here is the page I'm trying to get it to work on.http://bradkav.com/artexbarnsolutions/aquadump.htmlAt the bottom of the page, I have snapped an image of a cow eating grass in the pasture. I'd like this to be drawn ontop, and snapped to the bottom.Alternatively, if I could have a way of the main content window of my site start scrolling at a certain height so there is enough room for the cow to always be displayed, that would be great as well.Thanks in advance!

[jeffman]

For an image to be layered like that, you need two things. First, it needs to be taken out of the "flow" of page elements. Do this using some kind of positioning. position:absolute or position:fixed should do the trick. You'll need coordinates also, most likely. Second, you need to make sure it is layered in front of the other page elements. So it needs a z-index. The greater the index, the more elements it layers over. You can arrange multiple layers in this way by giving each a different z-index value.If you need a transparency or blending effect, then the edges of the image will need anti-aliasing and you'll need to save it as a png-24.A lot of these steps work poorly with IE6. I personally don't care, but it's something to think about.

[jlhaslip]

check over at http://cssplay.co.uk for getting IE6 to play nice with position fixed.I think it is under the IE tab.

[roundcorners]

you could use a javascript png transparency fix such as...http://homepage.ntlworld.com/bobosola/ or you could trial and error with a combination of nested, positioned <div>s and some css transparency, which will work in ie6+ et all. See here http://www.mandarindesign.com/opacity.htmlGive the div containing the text a width and height and set overflow to scroll;div {overflow:scroll;} You could try something like the following; <div id="outer"> <div id="inner">text goes here</div> </div>#outer {position:relative;left:0;top:0;z-index:99;background:transparent url(images/image.png) no-repeat 0 0;}/*IF YOU WANT TO MOVE THE IMAGE, CHANGE THE VALUES OF 0 0 (x, y respectively)*/#inner {position:absolute;width:300px;height:400px;overflow:scroll;}It depends who you are working for, but I would always advise that you cater for ie6 users, so grab a javascript png file off the web and hook it to your document.

[Kibble]

Hey guys,Just to update this post... I've explored this option a bit, and I'm realizing now that this feature may not be for me. The closest thing to getting this to work was thanks to jlhaslip's suggestion. I found a great tutorial at http://www.cssplay.co.uk/layouts/fixed.html that explains pretty much everything, but their solution doesn't work on my site.I can't find a way to get the image to tile on the x axis; I've tried everything I can think of and am just assuming that it won't work. I could always just make a super wide image (2000 across) that would be larger than 99% of the monitors looking at the screen, but then I'm loading an unnecessarily huge image every time someone comes to the page.I'm probably just going to make the cow stay at the bottom, unless I can figure out how to tile him on the X and make it look decent with a little alpha blend. I got the transparency working great by using a gradient eraser to remove the top part of the image and made it a .png with transparency. It just won't tile!Thanks for the help, you guys. I hope my questions are helpful or relevant to other people, too.

[Ingolme]

To tile the image horizontally, use the CSS background-repeat property:

background-repeat: repeat-x;

[Kibble]

To tile the image horizontally, use the CSS background-repeat property:

background-repeat: repeat-x;

Ah, yeah, I tried the repeat-x code, but it doesn't work in this instance... unless I'm missing something. #fixpic {display:block; position:fixed; bottom:0; background-repeat:repeat-x;}That's the code I'm trying to use on the picture, ripped from the source of that site. Any other ideas?

[Ingolme]

Where is the background-image property? You have to apply the repeat to the same element as the background-image.

[Shade]

put the page(div) to be scrolled and a div for banner in a container, another div.set the background-image to the banner image (which must be a .png of exact dimensions.) , background-repeat: no repeat.now, fixed position the banner div where it should have been. set a very high z-index (99).what I tried with firebug :to #bannerpic { add: ........... ........... position:fixed; left:150px; top:0px;}to #container { add: ........... ........... margin-top:150px;}