Go to Lesson #6: Working With ImagesGo to lesson #8: Inserting Special CharactersChanging Your Background

All right, if you have made it this far, congratulations! You are doing well. Now you are going to learn about seeing up the background of your pages. After all, you've seen hundreds of web sites with very cool graphics and colors, and you want to do that also!

The basic tag for setting the background to a web page is the <BODY> tag. As you should remember from the first lesson, the contents of a web page is began with a <BODY> tag and terminated with the </BODY> tag. You can include arguments on the <BODY> tag to set the background of the page.

Let's begin with color. You use one argument called bgcolor to set the background color. An example is shown below. 

<body bgcolor="#FFFFFF">

This sets the background color of the page to white. You can also use the color names as in: 

<BODY bgcolor="beige">

I know, setting the color sounds great, but what about those fancy images you see on so many web pages? That's very simple.

You start with a graphic. Any graphic will do. 

Remember that the browser tiles the graphic image, which means the image is repeated site-to-site and top-to-bottom until the window is filled. Because of this, it's a good idea to use images which look good when tiled. In other words, the boundary between the copies of the images is seamless. As you can see below, you cannot see the seam between the two copies of the image.

Use the HTML tag shown below to include the image as the background. 

<body bgcolor="#ffffff" background="images/satinswirlback.jpg">

You also want to be sure to choose a background color or image which contrasts well with your text colors (as well as with other elements on your page). One of the more annoying qualities of some web pages is to include backgrounds which make the text hard to read. Remember, your background needs to make your web site better and easier to read and understand, not more difficult.

It is also a good idea to include the background color in addition to a graphic image even though it seems like the color is not necessary (the graphic is used, not the color.) This is needed because many people surf without graphics.

As an example, suppose you have a black or very dark background image on your web page. Because of this, you use white text. Now if people surf your site with graphics turned off they will not be able to read your text.

One last effect that's pretty cool (although it only works in the more recent versions of Internet Explorer) is to fix the background image so that it does not scroll.  This is done with the FIXED attribute, as shown below. 

<BODY BACKGROUND="bg.gif" BGCOLOR="#000000" BGPROPERTIES="FIXED">

For additional information, see "Mistakes with Graphics".