Recipe 11.4. Keeping Background Images Stationary in Internet Explorer 6 for Windows

Problem

You want to have a fixed background image in Internet Explorer 6 for Windows.

Solution

Use the following JavaScript hack to force the effect. First copy the following code to call up the JavaScript code in your web page:

<head>  <title>CSS Cookbook</title>  <script type="text/javascript" src="/books/3/27/1/html/2/fixed.js"></script> </head>

Then in the fixed.js file place the JavaScript code for the workaround, which can be found at this book's online sample archive http://www.oreilly.com/catalog/cssckbk/ or from Andrew Clover's site at http://doxdesk.com/software/js/fixed.html.

Due to the length of the code, it's impractical to publish the code or expect you, dear reader, to type the code straight from the book.

Discussion

According to the CSS 2 specification, when a background image is fixed using the background-attachment property, it shouldn't move when the user scrolls the web page. In all versions of Internet Explorer for Windows, this property doesn't work at all.

However, this stunning JavaScript workaround developed by Andrew Clover fixes this problem by simply adding the JavaScript link to the web page. The JavaScript works by dynamically recalculating the position of the viewport as a user scrolls, and then it adjusts the background image accordingly.

Recipe 11.4. Keeping Background Images Stationary in Internet Explorer 6 for Windows

Problem

Solution

Discussion

See Also