Setting Your Webpage Background

Many websites can benefit from a bit of sprucing up, in the form of a background image or color change. They are quite easy to implement, but beware; it's also easy to fall in love with an image and post it as your site's background, without realizing that your "improvement" makes the page text unreadable!

There are two ways to set your page's background: using pure HTML, or with a style sheet. If your background is going to be shared across multiple pages, then by all means use the style sheet, as you can then post and update the background by changing one line of one page, instead of having to go into every page on your site and change the code. If you're adding a background to one page only, the simplest way to implement it is to use the <BODY> tag.

To change your page's background color using HTML, simply alter the <BODY> tag like this:

<BODY bgcolor="red">

It's that easy! You can set your background color to any of the 16 HTML named colors by simply entering the color name with the "bgcolor" attribute. (For your reference, the 16 named colors are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.)

If you want to use a color that's not in the named colors list, you'll need to find the hexadecimal reference code for that color. The tag will look like this:

<BODY bgcolor="#FF0000">

… which will produce the same results as "bgcolor='red'" in the example above. Hexadecimal color charts are available across the web, including one at Wikipedia.

Setting a background image for your page via HTML is just as simple. You include the file path to your desired image as follows:

<BODY background="/images/background.gif">

… which tells the browser to use the background.gif image from the "images" folder on your server as the background for that page.

The body tag background attributes have been deprecated in HTML 4+ and XHTML, so the preferred method for setting backgrounds today is through CSS statements. You can set your page's background color via CSS with the following code in your page head:

body {
background-color: red;
}

…or:

body {
background-color: #FF0000;
}

Similarly, you can use CSS to set a background image and you'll have much more control over how the image displays. Your CSS statement will look something like this:

body {
background-image: url(/images/background.gif);
background-repeat: no-repeat;
background-position: center bottom;
}

The "background-image" attribute is required, and gives the background image file's location. With CSS you also have two optional attributes available to control your background image. The "background-repeat" indicates whether you want your background image to tile horizontally (background-repeat: repeat-x;), tile vertically (background-repeat: repeat-y;), or not to tile at all (background-repeat: no-repeat). The second optional attribute, background-position, has two arguments. The first affects where the image appears horizontally; you can choose between "left," "center," or "right." The second argument sets the image's vertical alignment; you can set this to "top," "center," or "bottom."