Jump to content

Drawing An Image Layered Ontop Of Everything Else


Kibble
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...

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. :)

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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;}

Edited by Shade
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...