How to Change the Background of Your Website in Dreamweaver CS6

Chapter 4: Customizing the Background Colour and Setting a Background Image


How to Change the Background of Your Website in Dreamweaver CS6

by Christopher Heng, thesitewizard.com

One of the things webmasters often want to do with Dreamweaver is to change the appearance of the background of your website. For instance, you can change its colour ("color" in US English), or use a picture as the backdrop, or both.

For those of you arriving at this page from outside thesitewizard.com, please note that this is the 4th chapter of the Dreamweaver CS6 tutorial. Perhaps more so than any of the preceding chapters, the things taught here depend heavily on the material covered earlier (particularly the introduction to CSS of chapter 3 and its application in Dreamweaver). If you are not already familiar with these things, you may want to start from the first chapter. Those who are completely new to website design may find it preferable to start even earlier, at the true beginning, with the guide How to Start / Create Your Own Website.

Goal of This Chapter

By the end of this chapter, you will have either changed the background colour of your home page, or set an image as the backdrop, or both.

More About the CSS Classes Used on Your Web Page

In the previous chapter, you dabbled with creating and modifying CSS classes so that you could change the appearance of various pieces of text on your web page. The general principle for changing your website's background is the same. Like all things pertaining to a site's visual design, the background can be controlled by modifying the relevant CSS classes.

However, unlike chapter 3, you don't actually have to create a new class for the background. Since you're using one of Dreamweaver's pre-packaged layouts, classes for the various sections of your web page have already been created by the Dreamweaver designers. They needed to create those classes to produce the visual effect you currently see: two columns with a purple/blue colour scheme. As such, if you want to modify the background, you will need to know the names of those classes, so that you can change them.

The picture below shows the class names for each of the different sections of Dreamweaver's "2 column liquid, left sidebar, header and footer" layout, which was the layout you chose in chapter 1. The classes are the words printed vertically on the page, in black. That is, the top horizontal band belongs to the header class, the left column to sidebar1, and the right column to content. Although not shown in the picture, the footer is assigned the footer class.

Class names and HTML tags of different sections of the 2 column layout in Dreamweaver CS6

The background you see behind both the left and right columns is labelled with the word body. Note that "body" is, technically speaking, not the name of a class, but we will treat it like a class for the purpose of this chapter.

As an aside, for those who are confused by the screenshot above, don't worry if my picture is not identical to your website. If you have been diligently following this tutorial series, your logo (at the top of the page) will be different from mine, as will the content in the right column. However, in spite of those differences, the basic layout will still be the same, and you should have little trouble matching the various class names in my picture to the equivalent sections of your website.

By the way, don't waste your time memorising the class names. They are just arbitrary labels that the Dreamweaver developers assigned for this particular layout (just as you did for your text in chapter 3). Whenever you need to change those classes, just pop back to this chapter and refer to the picture.

You may have noticed that I didn't give you the class of the buttons (ie, the rectangular boxes) labelled "Link one", "Link two", "Link three" and "Link four" in your left column. Those buttons form what webmasters call the "navigation menu". Customisation of this menu is a bit more involved, requiring additional knowledge which you will only pick up in chapters 5 and 6. As such, please be patient and leave those boxes alone for now.

Additional Requirements: If You Want a Background Image

If you want to use one or more images as your background, you will need to copy those pictures into your local website's images folder (the one you see in your Dreamweaver "Files" panel) the same way you did for your site logo and other pictures in chapter 2. Please refer to that chapter if you don't know what I'm talking about, or have forgotten how to do this.

Do not skip this step, or some of the things described below will not work correctly.

How to Change the Background for Your Web Page in Dreamweaver CS6

  1. Start Dreamweaver CS6, if you have not already done so, and open your web page. For those who have closed their web page, and can't remember how to load it again, doubleclick the "index.html" line in the "Files" panel.

  2. Now refer to the picture showing you the list of CSS classes used on your web page. Look for the name of the class corresponding to the part you want to modify.

    Let's assume that you want to change the background of the purple/blue (or whatever colour it's called) part at the leftmost and rightmost edges of the page. Looking at the picture above, you will see that it is labelled "body".

    Move your mouse so that the pointer is hovering in that empty part of the page. Click once on that spot.

    The contents of the "CSS Styles" panel (on the right side of your Dreamweaver window) will change. Notice that the Rules section of that panel now has a line saying "body <body>" (see picture below if you can't locate it).

    The CSS Styles panel in Dreamweaver CS6 with rules for body highlighted

    Recall from chapter 3 that the CSS Rule Definition dialog box can be used to change the appearance of many aspects of your web page. It will probably not come as a surprise to you to learn that the same dialog box can be used to change the background of any CSS class.

    To invoke the CSS Rule Definition dialog box for "body", doubleclick the "body" line in the Rules section. The familiar CSS Rule Definition dialog box should appear, with a title that says "CSS Rule Definition for body in twoColLiqLtHdr.css".

    Although I use "body" as an example here, you should use the same procedure for the other parts labelled in the picture. For example, to configure the background of your right column, click somewhere in the right column. Refer to the picture above for the name of the class. In this case, it is "content". Doubleclick the line "content" in the Rules section of the CSS Styles panel.

    The same goes for the other parts of the web page, namely, the header (just click your logo once to load the appropriate rules into the CSS Styles panel), the footer (scroll down the page and click anywhere in the footer) and the left column. Note though, for the left column, don't click the words that say "Link one" to "Link four". Instead, click the placeholder text below that says "The above links demonstrate...[etc]" instead. Once you've loaded the relevant information into the CSS Styles panel, doubleclick the class name corresponding to the section you want to change.

  3. By default, "Type" should be selected in the leftmost column of the CSS Rule Definition dialog box. Click "Background" (found in that same column). This will cause the appropriate settings to appear on the right.

  4. Background Colour

    To change the background colour, click the rectangular box next to the "Background-color" line to invoke the colour picker window. Recall from chapter 3 that if you change your mind, and don't want to select a colour after all, hit the ESC key (on your keyboard) to get out of it. Otherwise, clicking a colour in this window will select it as the new colour for that part of your page.

  5. Using an Image as Your Backdrop

    To set a background image, click the "Browse..." button for the "Background-image" field to bring up the "Select Image Source" dialog box. Look for your picture file, and click it once to select it. A thumbnail representation of your image will be shown in the "Image preview" section on the right side of the dialog box, allowing you to confirm that you've selected the correct picture. Click the "OK" button.

    By default, if your picture is smaller than the background it is supposed to cover, your visitor's web browser will cause multiple copies of the picture to appear, repeating them as necessary so that they completely fill the background like the tiles on a floor. If you don't want this behaviour, click the drop down box for the "Background-repeat" field and select an option other than "repeat". The "no-repeat" option means that only a single copy of your picture will appear as the background. If it is smaller than the space available, it will be centred ("centered") by default. The options "repeat-x" and "repeat-y" cause your picture to be tiled horizontally and vertically respectively. Note that there is no "stretch" option to cause the picture to be resized so as to perfectly fit the space available. Leaving the "Background-repeat" field empty is the same as selecting "repeat".

    If you use "no-repeat", and don't want your picture centred, specifying the "Background-position (X)" and "Background-position (Y)" will allow you to position your image in the exact location you specify. "X" provides the horizontal coordinates and "Y" the vertical, and the position X=0 and Y=0 refers to the top left hand corner of the page. You can also use "left", "right" and "center" instead of a number for X to tell the browser to put the picture on the left, right or centre of the page respectively. Similarly, "top", "bottom" and "center" can be used in place of a number for the Y position to put the picture in the top, bottom or centre of the page respectively.

  6. When you are satisfied with your changes, click the "OK" button.

Note that you can change both the background colour and set an image as the background. That is, the options are not mutually exclusive. However, if you use an image that covers the entire visible area of that section, it stands to reason that you won't be able to see the background colour underneath.

If You Change Your Mind: How to Fix Your Mistakes

If you change your mind about the modifications you've made, simply invoke the CSS Rule Definition dialog box again for that particular class. Then select the "Background" line in the left column of the dialog box as before. You can then change the colour or image to something else, as well as modify the background repeat and position options.

Those of you who have set a background image earlier, and now regret it, can remove the image by deleting the words in the "Background-image" field. That is, click your mouse to put your text cursor in that field, and use the "Backspace" or "Delete" key on your keyboard to remove it.

For the advanced user: if you are familiar with the "Undo" facility (either by using Ctrl+Z on the keyboard or "Edit | Undo" from the menu), you will find that you won't be able to use the editor's Undo feature to fix your mistakes in this chapter. This is because when you use the CSS Rule Definition dialog box, you're actually making changes to the CSS file instead of your web page. To use the Undo facility, you will need to switch to the CSS file tab before invoking it. Don't do this if you don't know what you're doing or you'll cause more problems than you'll solve. In fact, if you're not 100% proficient with Dreamweaver, able to switch tabs and change between Code and Design views at the drop of a hat, ignore this paragraph and fix your mistakes using the method mentioned above. This includes the situation where you didn't understand what I just said (for example, this paragraph sounds like a lot of gibberish strung together in a pseudo-English sentence).

How to Change the Background Below the Left and Right Columns

While it's possible to change the colour of the background for the left and right columns, you'll probably have noticed that the colour change does not appear to completely cover the entire vertical space of those columns. That is, the colour extends as far as you have content for that column, but the portion underneath those columns that don't have any words or pictures remains white.

This is because the CSS classes for those columns lie on top of another CSS class called "container" and the background colour for the "container" class is by default white. To change this, click your mouse once somewhere in that space, that is, the part that is still white in spite of your colour changes.

Then in the "CSS Styles" panel, doubleclick the ".container <div>" line. This will invoke the CSS Rules Definition dialog box for the "container" class, allowing you to change the background as you see fit.

Note: if you have not specifically set any colour for your right column, any colour or image you set for the "container" class will bleed through to your right column as well. If you prefer your right column to remain white (or to have some other colour), explicitly set the colour for that column (ie, the "content" class), even if it is just white.

Save, Publish and Test

Save your work by clicking "Save All" from the "File" menu. Then upload your changes to your site in the usual way. (See chapter 1 if you have forgotten what the "usual way" is.) Remember to answer "Yes" when Dreamweaver asks "Should dependent files be included in the transfer", otherwise the changes to your CSS file and the new images you added in this chapter will not be published.

To test your changes, start up your web browser and go to your website. If what you see in your browser does not match what you saw in your web editor, see the "Publishing and Testing" section of chapter 3 for tips on how to solve it.

Next Chapter

In the next chapter, you will find out how you can make your pictures and words into clickable links.

Copyright © 2013-2014 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

You are here:

Top » Getting Started with Your Website »

How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All Dreamweaver Tutorials »

Get Adobe Dreamweaver CS6

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Change the Background of Your Website in Dreamweaver CS6





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.