CSS background-attachment and IE

How to make it work?

[MatthewHSE]

I'm working on a page where I need to use

background-attachment: fixed

on a div. It works great in Firefox, but as usual, IE is being a problem child.

I've gotten fixed backgrounds to work in IE when they're applied to the body. But, it's treating a fixed div background just like any other kind of background - it's not "fixing" it, but goes ahead and scrolls with the rest of the page.

<understatement> This is annoying. </understatement>

Is there any way to get the background-attachment property to work in IE? I'm using the HTML 4.01 Strict doctype.

Thanks in advance,

Matthew

[tedster]

As you've discovered, IE only supports background-attachmetn:fixed when it's applied to the body tag. In some cases you can cobble together a workaround using IE's Dynamic Expressions - essentially javascript welded into the CSS.

However, you need to be certain of the position of the div you are adding the background image -- to the pixel in most cases. This places a limit on the appraoch to position:absolute divs, or perhaps the first element on the page.

The idea here would be to know the exact pixel offset where the background first displays - and then use the dynamic expression to recalculate every time the page is scrolled. The +Math.random()*0 bit is there to overcome another IE irritation in that it doesn't always seem to recognize that the page has scrolled.

I found this approach on [mantasoft.co.uk...] Assuming we want the background image always to begin at 150,100 relative to the viewport, we can use:

[quote].fixedbg{
margin:128px;
background-image: url(images/background.jpg);
background-position-y:expression(document.documentElement.scrollTop-150+Math.random()*0);
background-position-x:expression(document.documentElement.scrollLeft-100+Math.random()*0);
}

[MatthewHSE]

Hi, thanks for a good solution to this. At the moment I've opted for Dean Edwards' IE7 javascript, but will likely change to your answer once I'm finished with the basic design and know for sure where the offset really is (and that it will stay there).

I sure hope the "real" IE7 can come up with some decent support for CSS. Of course, IE6 will still be around in significant numbers until 2008 anyway...