Manipulating Your Background Image

The normal display situation for a background image incorporated into your page using the background= parameter on the body statement is that the image is tiled (repeated) in both directions to fill the display window. Also the background moves with the page. You can make use of this knowledge to create some interesting background effects (eg. the two colour background on this page is actually an image only 1 pixel high that is tiled down the screen). Other times you want only a single copy of the background is a specific position in the display window and with the image remaining fixed in position even when the page is scrolled. The standard background= parameter on the body statement can't help us to do that. For greater control of the background image, we forget about the background= parameter and define the background using a stylesheet definition instead.

The stylesheet definition that we want needs to apply to the body tag since this is where the background needs to be defined. There are a number of parameters available and this following example includes all of the ones that you probably want to use.

 body {background-image: url(background.gif);
background-repeat:
no-repeat;
background-position:
100px 100px;
background-attachment: fixed;}

The background-image: url() parameter allows us to specify the background image the same way as the background= did when coded directly on the body tag.

You specify the background-repeat: parameter if you want to restrict the tiling of the image. Available values are repeat-x to tile only across the screen, repeat-y to tile only down the screen, and no-repeat to not tile the image at all.

The background-position: parameter allows you to position the top left corner of the image relative to the top left corner of the page. The distances can be specified either as a fixed number of pixels (px) or as a percentage (%) of the window size.

Finally, to fix the background image so that it doesn't scroll you specify the background-attachment: fixed; parameter.

You don't have to specify all of these parameters, you can specify just those that will give the background image effect that you require. Note that these effects only work with browsers that support these stylesheet commands and visitors viewing your site with browsers that do not support these commands will not see the effects. You need to take into account what those with earlier browsers will see when designing your page.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate