Adding a Background Image

Making two columns appear to be the same length is very easy to accomplish using background images. You will use Fireworks MX 2004 to accomplish this. Complete the following steps:

1. Launch Fireworks and click the New Image icon.
2. Make the image 200 pixels wide and 20 pixels high.
3. Select the Rectangle tool and drag it out over the canvas.
4. Give it the color value #D4DAD6.
5. Select the Line tool and hold down the Shift key to ensure your line remains straight.
6. Draw a line down the right side. It should be one pixel wide.
7. Give the line the color value #666666.
8. Select Modify > Canvas > Canvas Size.
9. In the Canvas Size dialog box type 1 in the height box and click OK.
10. Select File > Export Preview.
11. In the Export Preview dialog box select 4 for the color maximum and click the Export button.
12. Save the file in your images folder.

p>You now need to reference the image from within the basiclayout.css file. Open this file in Dreamweaver and locate your #wrapper selector (see Listing 6).

#wrapper{
 width: 770px;
 background-color: #ffffff;
 margin: 10px auto;
 border: 1px solid #000000; 
text-align: left;
 }

Listing 6. #wrapper selector code

Now complete the following steps:

1. Place your cursor after the text-align: left; property and press Enter.
2. Type background-image:.
3. When the Browse button appears, click it to open the Select File dialog box.
4. Navigate to your image, select it, and click OK to insert the code.
5. Type ; after the code and press Enter.
6. Type background-repeat:.
7. From the code hints, select repeat-y and then type ;.
8. Save your work.

The #wrapper selector should now resemble Listing 7.

#wrapper{
 width: 770px;
 background-color: #ffffff;
 margin: 10px auto;
 border: 1px solid #000000;
 text-align: left;
 background-image:url(../../tutorial_images/wrapper_bg.gif); 
     /*the path may vary according to your local site set up*/ 
 background-repeat: repeat-y;
 }

Listing 7. Revised #wrapper selector code

You can now preview the page in your browser (see Figure 6).

Figure 6. Two distinct columns in the layout

I hope you have enjoyed this tutorial so far. There is still one more to come, so stay tuned for that.