Keeping Background Images Stationary in Internet Explorer 6 for Windows






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="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.

See Also

Recipe 3.7 for information about setting a fixed background image; the CSS specification for the background-attachment propery at http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows