Adding a Background Colour or Image

• Digg
• Stumbleupon
• Delicious
• Facebook
• Myspace
• Google
• Technorati
• Newsvine

Written by Colin Welch – 16.03.09

Tweet This

Part 4.1: Changing the Background Colour or adding a Background Image

Load Dreamweaver CS4 and double-click the “index.html” file in the FILES pane.  You should see the two column layout that we created in Dreamweaver Training Part 1, a site logo and graphics that we added in Dreamweaver Training Part 2, and customised font settings made in Dreamweaver Training Part 3.

Take a look at the background colours of your web page as it currently stands.  There are a few set colours already in place; the header, footer and side bar have different shades of light grey, the main content has a white background, and the background behind the two columns (page background) has a dark shade of grey.

Changing the Page Background

Click anywhere on your page.

In PROPERTIES at the bottom of the Dreamweaver window, click the button that says “Page Properties”.
A dialog box entitled “Page Properties” will appear.  You can either:

• Change the Background Colour: Click the square box beside the word “Background color”. A colour picker window will appear, allowing you to change the colour. Click on the colour you desire. If you decide that you really don’t want to change the colour after all, hit the ESC key on your keyboard. When you’re satisfied, click the “OK”. Your web page background should automatically have changed colour.

• Use a Background Image: make sure an image has been saved into your “images” folder. Then, in the Page Properties dialog box, click the “Browse” button.

A dialog box with the title bar reading “Select Image Source” will appear. Double-click the “images” folder in the dialog box. Select the picture you require for your background. Once your image is selected, click the “OK” button.

The background image file and folder name should now appear in the “Background image” field.

Click the down arrow for the “Repeat” field (underneath the “Background image” field). If your image is small, and you want to duplicate copies of the image to fill the entire window, click “repeat” in the drop down box.  If you are happy with the size of your image, and you do not need to duplicate it, click ‘’no-repeat’’.  You can also make the image tile horizontally (“repeat-x”) or vertically (“repeat-y”).

Remember, you can view your web page with the changes you selected without leaving the dialog box. If you clicked “repeat” but are not sure whether it looks good for your site, click the “Apply” button at the bottom of “Page Properties”. In the background, behind your dialog box, you should be able to see your page with the changes. If you’re not satisfied with it, just change the repeat pattern and click “Apply” again. When you’re satisfied with your choice, click the “OK” button.

(Note: if you decided you no longer require a background image, and have clicked ‘’Apply’’, clicking ‘’cancel’’ will not undo your change. To do this you will need to click the “Background image” field and use the DEL or backspace key to remove the filename and folder.)

Similar resources you may like

1. Adding a logo to your Website
2. Change the Background Dreamweaver CS4
3. Header, Footer, Side Bar and the Main Content
4. Clickable Images that Open Up a Larger Image
5. Spry Menu Bar Widget – Change the Colours

Tags

background image, changing the background, dreamweaver cs4, Dreamweaver Training

Share This Resource

• Digg
• Twitter
• Stumbleupon
• Delicious
• Facebook
• Myspace
• Google
• Technorati
• Newsvine