Static Backgrounds

Static Backgrounds A popular design element in web pages is a fixed background image (wallpaper). This is also referred to as a "non-moving background" or "static wallpaper". This tutorial will show how to take an existing image and use it as a fixed background image in a web document. This effect relies upon Cascading Style Sheets (CSS). Although the steps below describe using the Design View of Dreamweaver MX, the actual CSS code created for this effect is also presented at the end of the TechNote for customers familiar with hand coding their pages.

Step 1: • •

In your document, Open the CSS Styles window (Window > CSS Styles). Click on the New CSS Style button.

Step 2: • • • • •

In the New CSS Style window, in the Selector Type radio group, select Tag (redefines the look of a specific tag). From the Tag pop-up menu, select body. For Define In, select This document only. In the CSS Style Definition for body dialog, select the Background category. Browse for your background image to use as your static background.

Step 3: •

Set the following options

1. 2. 3. 4.

Repeat: No-repeat Attachment: Fixed Horizontal Position: Center Vertical Position: Center

It should now look like this:

Step 4: •

Click OK. The effect will not be visible within Dreamweaver's document window with these settings, although different settings will allow Dreamweaver to display the image. Preview in the browser to verify the image is centered and fixed.