Designing with CSS – Part 5: Adding a Background Image
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 8 to accomplish this. Complete the following steps:
- Launch Fireworks and click the New Image icon.
- Make the image 200 pixels wide and 20 pixels high.
- Select the Rectangle tool and drag it out over the canvas.
- Give it the color value #D4DAD6.
- Select the Line tool and hold down the Shift key to ensure your line remains straight.
- Draw a line down the right side. It should be one pixel wide.
- Give the line the color value #666666.
- Select Modify > Canvas > Canvas Size.
- In the Canvas Size dialog box type 1 in the height box and click OK.
- Select File > Image Preview.
- In the Image Preview dialog box select 4 for the color maximum and click the Export button.
- Save the file in your images folder.
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;
}
Now complete the following steps:
- Place your cursor after the
text-align: left;
property and press Enter. - Type background-image:
- When the Browse button appears, click it to open the Select File dialog box.
- Navigate to your image, select it, and click OK to insert the code.
- Type ; after the code and press Enter.
- Type background-repeat:
- From the code hints, select repeat-y and then type ;
- 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;
}
You can now preview the page in your browser (see Figure 6).
I hope you have enjoyed this tutorial so far. Next, got through the last article in this series.
Comments