html tutorials web design help css tutorials free web graphics diy search engine optimization

Scrolling Background

NOTE: This script doesn't work in newer versions of Internet Explorer.

If you're using Internet Explorer you should see the background scrolling by. You may notice the background around the page header isn't scrolling, but that's because it's build into the header graphic.

Note: If I'd have made the header with a transparent background it would have had to be a GIF image, and with all the detail in the header graphic the file size would be unacceptably large.

Browsers other than Internet Explorer will see the standard background and will not get a JavaScript error. They will see no message or a message of your choice, but no errors.

How to do it, do it, do it:

Just add the following to the top of your page, under the body tag or wherever you want a message placed if you choose to display a message to people using browsers other than Internet Explorer:
<script type="text/JavaScript">
if( (navigator.appName.indexOf('Explorer') > -1) || 
(navigator.appName.indexOf('IE') > -1) )
var backgroundOffset = 0;
var bjSlide=eval('document.body');
function render(edify) {
backgroundOffset=backgroundOffset + 1;
if (backgroundOffset>edify) backgroundOffset = 0; = "0 " + backgroundOffset;
var ScrollTimer = window.setInterval("render(153)", 50);
} else {

Editable Parts

  • In the third line up from the bottom, the line that begins with "document.writeln" - if you want to display a message on the page for non-Internet Explorer users, replace the word "Message" with your message. Do not use special characters in the message, and if you have to use an apostrophe, preface the apostrophe with a backslash. An apostrophe means something else in JavaScript. Prefacing the apostrophe with a backslash tells the browser to print the character rather than interpret it. Example:
    Boogie Jack\'s
    If you do not want to display a message to people using other browsers simply remove the word "Message" from the code, leaving just the <p></p> tags facing each other, or remove the line from the code—but be careful—you could get a nasty rash if you mess it up!

  • In the following line:
    var ScrollTimer = window.setInterval("render(153)", 50);
    ...set the '153' to the height of your background image for the smoothest scrolling.

    ...set the '50' to the speed you want the background to scroll. The lower the number, the faster it will scroll. Do not set it to zero though, or it won't scroll at all.

Now there's a different kind of effect, eh Mr. BimbleWhimple?
Back | Web Design Tutorials Index

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)