This isn't working --- div#moon { position: absolute; top: 20%; right: 20%; width: 120px; height: 127px; background-image: url('/06/fullmoon.jpg'); background-repeat: no-repeat; background-attachment: fixed; }

it would be more helpful for me and anyone else who may have some helpful ideas, and thus for yourself; if you say what isn't working.

- did it crash your computer? (hopefully not)
- did it show up fine in the correct place initially, but not remain fixed with relation to scroll?
- or somewhere inbetween?

Sorry, I'm tired. Okay, the image doesn't show up at all for the above code. I'm using Firefox 2.

but, having a stab at it.

I guess the problem is as I mentioned:

The background position is fixed relative to the scroll within the div, but that div isn't ever going to scroll

Is there a reason you can't use the body tag for the background?

I would try using a fixed position div behind the main section of your page... It doesn't work in IE usually as I said, but there's workarounds, as I said:

http://www.cssplay.co.uk/layouts/fixed.html

set the div background or borders to blue and see if you can see it.. that CSS should work for an absoulute position

Thanks for helping. I'll get back to this tomorrow.

My pleasure; post back if you're still having problems.

You can set it as a background image for the HTML
[code] html{background-image:url(whatever);position:fixed;top:0,left:0;}

This would fix the image in the top left corner of the page BEHIND anything else on the page - this might be what you're looking for.

HTH