scrolling css image

Okay, I need an image to scroll with the page.

This is what I got from the w3 school:

<style type="text/css">

body
{
background-image: 
url('http://www.site.com/image.png');
background-repeat: 
no-repeat;
background-attachment: 
fixed
}
</style>

Code (markup):

Problem is, I don't want this to be the background image. I already have a background image, this must be an additional image. Furthermore, I don't want it to be visible until say 500px down the page, and then it scroll down lower than that, and once back up to 500px it stays there.

Make sense? Anyone want to come up with some code or point me in the right direction? Thanks!

 

A suggestion, perhaps?

 

You need to create a <div> and use CSS to set position: fixed. Set position-top: 500px to keep it from showing up until further down the page. It also depends on where you place this <div> inside your code. Be careful, though, IE doesn't like position: fixed and will give you problems.

http://www.gunlaug.no/contents/wd_additions_15.html if you run into IE trouble with it. I would suggest reading it first if you choose to try this method.