3. Changing The Background Color



By default the background of your web page is white, but if you want to make it more interesting for your design you may color the background with a solid color or add an image in background. This image may have a fixed position or scroll along with your layout, may repeat on the x-axis or the y-axis (for more reference see the Dreamweaver Help). In our example the page will have a solid color gray background corresponding with our layout's color.

Open the file index.html from template/html/html_version.

These are the background & content areas:

Now to modify the background color go to main menu and from Modify choose Page Properties:

The Page Properties window will appear:

As you can see above in the Appearance category you have some general settings: Page font, size, text color, background color or image etc. All these setting can be set and all but the background color are set in the external CSS file. We have choose to define the background color from here to show you that you can have both "inside" (written directly in the page code) and "outside" (in an external CSS file) styles. From background color you can set a new color using the color picker or write the exact color code in the area close to the color picker preview. Dreamweaver will auto generate the code for the new style as you can see above. This code is part of the <HEAD> tag and is enclosed in the <style></style> tags.

Below the background color you have a space for background image. If you want to add an image to your background just write the exact path to that image or use the browse function to find it. After selecting an image for background you can set the way it will be displayed from the Repeat menu:

If you left the Repeat space blank the image will repeat both on x & y axis. If you choose "no-repeat" the image will be placed in the background only once, the rest of the background being filled with the set background color. If you want to repeat the image only horizontally or only vertically choose one of the repeat-x or repeat-y options. Try these options and see what is happening.