Fix background image in IE6

[tenderfoot]

Hiya guys, I have a problem (I will try and explain this as clearly as possible):

I need to layer three different background images onto pages of a website to achieve a graphical effect (3 images oppose to 1 large image for speedy download times).


I decided for one background image I would use the body tag and then apply the other two by using a divs as shown in the attached image.

1. There is a fade that is repeated vertically on the body tag,
2. A feathered edged graphic that is not repeated to remove some of the tiled fade at the top of the page,
3. And another graphic that is the "potdots" to the right.

Here are the styles:

Code: Select all

body{
    background-image: url(/images/fade-tile.jpg);
    background-position: top;
    background-repeat: repeat-y;
    font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    height: 100%;
}

div#dropshadow-half{
    background-image: url(/images/dropshadow-half.jpg);
    background-position: top;
    background-repeat: no-repeat;    
}

div#dropshadow-half-potdots{
    background-image: url(/images/dropshadow-half-potdots.gif);
    background-repeat: no-repeat;    
    background-position: center;
    width: 100%;
    height:920px;
    margin: 0;
    padding: 0;
}

The problem is that this rendered as in the attached image (layers.jpg) in browsers except for in IE6 which is annoying me.

What happens is, when you change the height of the browser window the potdots move upwards and run into the header graphic (IE6-issue.jpg)

I have tried adding:

Code: Select all

div#dropshadow-half-potdots{
    background-image: url(/images/dropshadow-half-potdots.gif);
    background-repeat: no-repeat;    
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
}

But this does not seem to work. There maybe a very simple solution, but I have lost all objectivity as I have been looking over this for a while now.

Could anyone help please?


Thanks in advance for this!

[Lchad]

I'd need to see either a link or the html portion to be able to tell what is going on.