Inside Technique : Animated Backgrounds
By Scott Isaacs

Internet Explorer 4.0 makes almost every CSS property dynamic. In this example, we show you how to manipulate the CSS background properties to create a scrolling background. The background properties expose position and repeat properties that represent the location of the background image and direction to tile the image. By repeating a background image, and then dynamically manipulating its position, you can make the background scroll. With IE4, you can select a different animated background:

This technique only works in Internet Explorer 4.x+. Netscape does not allow dynamic manipulation of most style beyond CSS Positioning, and even if they did, they do not provide support for the CSS-1 background properties necessary to repeat and position backgrounds. A cross-browser version can be created by using CSS Positioning to position and manipulate the image. However, the CSS-P approach is inefficient and has really bad scrolling characteristics. Each time the user resizes or scrolls the window, you would need to resize the background image. Furthermore, when the document is scrolled, the background would flicker as it is positioned back on the screen. Manipulating the CSS background property to animate backgrounds provides cleaner painting than CSS-Positioning, but we have noticed that it can slow down other applications as it runs.

Using our Animated Background Builder, we help you experiment with the different background values as well as generate the script you can copy and paste into your page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.