This is a step by step description of the options in the CSS Rule Definition dialog from Dreamweaver CS3. Today we are covering the options related to the "Background" panel where you set up behaviors in the background of your elements.

You can download a PDF version of this article here.

CSS Rule Definition: Background

This is the basic rule definition dialog for Dreamweaver CS3. It has 8 categories down the left-hand side. Each one will present you with a range of options in the main part of the dialog. This paper describes the "Background" section.

Background Color

The most basic setting for this section is the Background Color. You can use the drop-down menu to choose a color from Dreamweaver’s template, or you can type a number directly into the empty field next to the color selector. If you do type the number directly, be sure to include the # sign at the beginning!

The palette that shows up under the cursor is set to display "web-safe" colors by default. In the olden days on the web (just a couple of years ago!) we always stressed using web-safe colors, but they are becoming less important in today’s world. Note that web-safe does not promise the colors will be the same on different computers, only that they won’t be dithered.

Early computers often could not reproduce a full color spectrum, so they cheated by dithering the colors, or by putting different colors side by side to blend and make our eyes see colors that weren’t really there. For example, they may have put a pixel of red next to a pixel of red to make us see orange. Web safe colors gives us the guarantee that if we see orange, all the pixels are orange.

Anyway, computers sold today can display enough colors that web-safe is no longer an issue.

An added benefit of the eye-dropper cursor is that you don’t have to select colors from the palette itself. You can move the eye-dropper over any color visible on your screen to pick up that color for this space. You can sample colors from photos, other places on your Dreamweaver document, even out of icons on your desktop, as long as they are visible when you choose the drop-down.

Finally, when you are choosing a background color, make sure it’s dark or light enough to provide plenty of contrast with your font color or people won’t be able to read the text on your web page.

Background Image

You can type a fully qualified URL (one that starts with http:// ) or you can click on the browse button to select a graphic image from your hard drive. If the image is not contained within your web structure, Dreamweaver by default will offer to copy the image in for you when you are done.

Keep in mind that busy or high-contrast images and patterns make it difficult to read the text on your page. You should keep background images low-contrast, or "washed out," so that your site is easy to read.

By default, any image you place here will be placed in the upper right corner and then repeat over and over all the way down through the visible parts of the page.

Repeat

If you have an image in your background, repeat tells the browser how to repeat it when you don’t want it use the default. The four options are: "repeat," which makes the image repeat across and down the page; "repeat-x," which makes the image repeat only across the page; "repeat-y," which makes the image repeat only down the page; and "no-repeat," which makes the image display only once with no repeating.

The default is "repeat" in both directions, but remember that any HTML element can inherit directions from its parent element (the element that encloses the current element), so if you have complex embedded elements, it might be worth it to explicitly say "repeat" if that’s what you want it to do.

Attachment

If you have a background image, this property will determine whether the image scrolls with the page or not. If it is set to "scroll," the image will scroll with the rest of the page as it move. If it is set to "fixed," then the image will not move as you scroll the page.

Horizontal and Vertical Positions

If you have included a background image, you can use the position settings to offset it from the upper left corner of the browser window. In the image above, it is set to display the upper right corner of the background image 100 pixels from the left hand side.