Q934 Is it possible to fix the background image when the page is scrolled?

irt.org | Knowledge Base | JavaScript | Scroll | Q934 [ previous next ]

Q934 Is it possible to fix the background image when the page is scrolled?

In Internet Explorer you can use:

<body background="image.gif" bgproperties="fixed">

With the use of Style Sheets the following also work in Internet Explorer 4, but in Netscape Navigator 4 there is no support for the background-attachment attribute:

<body style="background-image: url(image.gif); background-repeat: repeat; background-attachment: fixed">

Using layers in Netscape Navigator 4, the closest that you can achieve is a floating layer that repositions itself to the current top left corner of the browser window. If the layer is large enough it will cover the complete window background. The only flaw, is that the layer judders every time the window is scrolled:

<html>

<body onLoad="pageOffset()">

<script language="JavaScript"><!--
function pageOffset() {
    if (document.layers) {
        document.layers['layerName'].pageX = window.pageXOffset;
        document.layers['layerName'].pageY = window.pageYOffset;
        setTimeout('pageOffset()',1);
    }
}

if (document.layers) {
    var output = '';
    output += '<layer id="layername" left="10" top="10" z-index="-1">';
    output += '<img src="image.gif"><img src="image.gif"><img src="image.gif"><br>';
    output += '<img src="image.gif"><img src="image.gif"><img src="image.gif"><br>';
    output += '<img src="image.gif"><img src="image.gif"><img src="image.gif"><br>';
    output += '<\/layer>';
    document.write(output);
}
//--></script>

<br><br><br><br><br><br><br><br><br><br>10
<br><br><br><br><br><br><br><br><br><br>20
<br><br><br><br><br><br><br><br><br><br>30
<br><br><br><br><br><br><br><br><br><br>40
<br><br><br><br><br><br><br><br><br><br>50
<br><br><br><br><br><br><br><br><br><br>60
<br><br><br><br><br><br><br><br><br><br>70
<br><br><br><br><br><br><br><br><br><br>80
<br><br><br><br><br><br><br><br><br><br>90
<br><br><br><br><br><br><br><br><br><br>100

</body>
</html>

Feedback on 'Q934 Is it possible to fix the background image when the page is scrolled?'

12:18:27 6/02/00 Lewis Billingsley

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.