Dynamic CSS Backgrounds

There are lots of examples of great backgrounds in website design. Most of the time those backgrounds are static artwork into which web page content is integrated. CSS allows for the integration of some movement into a background image when a browser window is resized to give a scrolling effect. That gives a web page additional interest and strong visual impact. A great example is the Silverback website . The code to achieve this effect is simple, and it’s easy to integrate into any website.

Choosing Your Background Images

I’m using a cityscape to demonstrate. There are three images;

layer-1.png
layer-2.png
layer-3.png

Each image is a cityscape image in a different shade – one black, one dark gray, one light gray.

Configuring The HTML

The HTML is very simple, just three DIVs, given the IDs ‘layer-1′, ‘layer-2′ and ‘layer-3′.

The appearance and dimensions of these divs, and the configuration of the background images, occurs in the CSS file.

Defining The DIVs In CSS

Each DIV is set to 100% width and 173 pixels in height (the height of the cityscape images). These DIVs will be overlaid one on top of each other. The DIV layer-1 is the first, and layer-2 and then layer-3 are overlaid on top of that first layer.  The overlay is achieved by using the CSS position: absolute.

The background images for each DIV are defined. The light gray images is my first layer, then the dark gray, and then the black is the image to the forefront. Each background image is set to repeat-x.

At this point the page looks like three background overlaid on top of each other. This looks OK, but if we resize the window then all the background images remain static.

Use Percentages To Make Backgrounds Dynamic

The black cityscape image, in the forefront, is going to remain static. The dynamic parallax movement of the background images for layer-1 and layer-2 is created by using the background-position CSS property. layer-1 is set to background-position of -70%, and layer-2 is set to background-position of -20%.

These percentages are arbitrary. I used them because I thought it created the best ‘first look’ on a maximised browser window. The percentage value means that the absolute pixel width of that value changes dependent on the browser window size. If a browser window is 1000 pixels wide then a background-position of -20% will make the background image indented by 200 pixels. If the window is resized to 500 pixels wide then the background-position of -20% will make the image indented by 100 pixels. This will make the background appear to move as the window is resized.

The CSS Code

#layer-1
{
width: 100%;
height: 173px;
background: url('../images/layer-1.png') repeat-x;
background-position: -70%;
}
#layer-2
{
width: 100%;
height: 173px;
background: url('../images/layer-2.png') repeat-x;
background-position: -20%;
position: absolute;
top: 0px;
}
#layer-3
{
width: 100%;
height: 173px;
background: url('../images/layer-3.png') repeat-x;
position: absolute;
top: 0px;
}

And now that we’ve finished this simple code we have a very cool visual effect which you can see here (remember to resize the browser window).