Placing a Background on Your Home Page

Now you are going to place a background for your website. There are many websites that have free backgrounds. Some are listed below. Make sure that you choose one that makes sense with the theme of your website. In other words you would not use a baby print background if you were designing a business website. Find the background you want to use then save it to your student folder.

Once you have your background saved to your folder open your NotePad and change your body tag to read (your extension might be .jpg instead of .gif):

Gif File:

Add Background

Jpeg File:

Add JPG Background

Notice the background image on this page. The original background picture looked like this (I have placed a black border around the picture to show you the size of the image):

Background Image

If you have a busy background like the one shown below, you will need to place your text on the page in a large table:

Busy Background

Here is how it looks without putting your text in a table: I cannot see the text on the page.

Dark Background

First open your background image in Fireworks (Start > All Programs > Macromedia > Fireworks). Click the down pointing arrow on the bucket tool then click on a color in your image to choose a color:

Pick Color

As you can see below I selected the blue (#4E4DD0) from the picture. I will need this number for the background of my table.

Blue Selected

Just under the beginning body tag and just above the end of body tag add the following code to start your page. Notice I have aligned the table to the center, assigned it a width of 640, and made the background color (bgcolor) blue (4E4EE0):

Table Tags FYI: <TR> stands for table row, <TD> stands for table data or the cells of your table, </TD> stands for end of table data, and </TR> stands for end of table row.

Now your page should be easy to see. Mine looks like this after adding the table with background color:

TAble Inserted