9.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> <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.
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 2.7 for more information about
setting a fixed background image; the CSS specification for
background-attachment
at http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment.
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.