http://londonlabs.co.uk/test/

I have set a background image for my page using this CSS:

body {
    background-image: url(images/bg-new.JPG);
    background-repeat: repeat;
    background-color: #00CCFF;
    background-attachment: fixed;
    margin: 0px;
    padding: 0px;
    height:100%;

This image is a small square that is tiled over the whole page.

I have a DIV that has a background image which has been set using this CSS:

#bg {
    background-image: url(images/splash.gif);
    background-repeat: repeat-x;
    background-attachment: fixed;
    height:600px;
    width: 1990x;
}

This image is the image with the paint splash and bit of text.

In IE6 when I scrol the page down the background image of the bg DIV isnt fixed - I would like it to be.

If FF1.5 the background image of the bg DIV is fixed but when I scrol the background image of the body seems to overlap it.

Is there any way to make the big image that is used by 'bg' fixed but not be covered by the body background image when scrolling down the page?

Thanks.

In IE6 when I scrol the page down the background image of the bg DIV isnt fixed - I would like it to be.

Unfortunately, you can't. IE6 does NOT support position: fixed.

Thats a shame.

Thanks.

There is a hack for it (allegedly...I haven't tried it yet):

http://tagsoup.com/cookbook/css/fixed/