Dreamweaver Article

Working with Background Images and CSS – Part 1: Using Repeating and Non-Repeating Images

Creating a Background Image

For starters, you need to define a site in Dreamweaver 8 and create a background image in Fireworks 8. If you haven't defined a site in Dreamweaver yet, do so now. If you need help defining a site, see "How to Define a Site in Dreamweaver" (TechNote 14028). If you don't have Fireworks or want to bypass this section, you can use the completed background image that is included in the sample files that come with this tutorial. You will still need to save this file to an images folder in your site.

To create a background image:

1. Open Fireworks and click the Create New Fireworks File button or select File > New.
2. Create a canvas that is 50 pixels by 50 pixels.
3. Click the Custom Canvas color option, click the canvas color chooser, and enter #2D5172 in the color text box.
4. Click OK.
5. Select the Ellipse tool from the tool bar. You may need to click the Rectangular tool and hold it down and choose the Ellipse tool to select it.
6. In the Property inspector, enter #3399CC for the fill color and remove the stroke (a white rectangle with a red line through it).
7. With the Ellipse tool selected, draw a circle on the center of the canvas about half the size of the canvas (see Figure 1 for guidance). You've given your canvas a fairly dark blue color and you have drawn a paler blue circle in the middle of the canvas. The circle in the middle enables you to see how the image is set under the different repeat values that you will be using.

Figure 1. The completed background image

When you are happy with your background image, you can export it to your local site by completing the following steps:

1. Select File > Export Preview.
2. Set the Format option to GIF, the Palette to Adaptive, and the number of colors to 8.
3. Click the Export button.
4. Navigate to the local site you defined in Dreamweaver.
5. Create a new folder called images.
6. Open the images folder.
7. Save your image within the images folder as bg.gif.
8. If you have defined your Dreamweaver site with a remote server, put the bg.gif image to the server using the FTP put command.

To complete the preparation work, open Dreamweaver if it isn't open already and create a new page. Without making any alterations to this page, save it as repeat.html into the root of your site.

You are now ready to begin working with your bg.gif background image. You'll soon be manipulating it with some very simple, but effective, cascading style sheet (CSS) rules. I would like to point out at this stage that the style sheets in this tutorial will be embedded in the head section of each page you work with. This is a nice way to present the material in the tutorial, because everything is right in front of you. In a real-world production scenario, of course, your style sheet would be an external style sheet, rather than embedded within the head of the document.

Working with external style sheets is explained in depth in another tutorial I wrote for the Developer Center, "Designing with CSS – Part 1: Understanding CSS Design Concepts."

Page 2 of 5

Previous Page

Next Page