Fun with Background Images Part II
by Thomas Brunt

Page Backgrounds

Here is the code in my external style sheet that controls the background image on this page.

BODY
{
background-color: white;
background-image:url('images/background2.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}

Let's take a look at each of the 5 properties I'm using for this background.

background-color: white;

This one is pretty obvious.  This tells the page to have a white background throughout the area of the page that the non tiling background image does not cover.

background-image:url('images/background2.jpg');

This is the path to the image to be used.  If you're going to use an image from the main images folder in your web, then it's probably best to make the path begin with a / like this.

• /images/background2.jpg

This won't work if you're just viewing a page on your hard drive, but on a server the slash tells the browser to go to the root of your web.  That way, the same code can be used for any page in any folder in your site, and the path will work properly.

background-repeat: no-repeat;

This property gives you several options for how the background will tile.  Here are your choices

• no-repeat (bg shows up only once)
• repeat-x (bg tiles horizontally but not vertically)
• repeat-y (bg tiles vertically but not horizontally)

background-attachment: fixed;

This property allows you to make the background image remain in a fixed position in the window while text and other content scrolls over it.

background-position: top center;

You can specify a value for the vertical position of the background image and another for the horizontal position with a space between the 2 values.  You can use percentages, distance, or keywords.  All of the following are valid.

• background-position: top center;
• background-position: 1cm 3in;
• background-position: 10% 10%;
• background-position: 20% center;

< < Part I