Unless you like the default colour ("color" in US English) scheme of white, chances are that you will want to change the background colour of one or more portions of your web page. Alternatively, you may want to use a picture as a backdrop. This is the subject of the current chapter.
By the end of this chapter, you will have either changed the background colour of one or more sections of your web page, or added one or more pictures to form the backdrop, or both. You will also find out more about identifiers in CSS.
As before, I will assume that you know the material covered in the previous chapters of the Expression Web tutorial. If you have arrived at this chapter from outside thesitewizard.com, and are a new webmaster, you may want to start with my guide on how to create a website.
Open your web page in Expression Web, if it is not already open.
Click to put your text cursor somewhere on your web page. It doesn't matter where. All that matters is that there is a text cursor on the page.
Look at the "Manage Styles" panel at the bottom left side of Expression Web. If the "Apply Styles" tab of the panel is currently selected, click the "Manage Styles" tab to activate it.
You should see the following names in that panel (probably below "body" and "img", and not necessarily in that order, or consecutively). Each of these names are labels for different sections of your page. (You may have to scroll down the panel to see all of them.)
div#tswsidecol — refers to the side (or left) column
div#tswcontent — refers to the content (or right) column
div#tswfooter — refers to the footer
div#tswheader — refers to the masthead or header section
div#tswcontainer — contains the header, footer, left and right columns (more on this later)
Unlike the CSS classes which you met in chapter 3, these labels do not start with the full stop (".") nor can you label multiple parts of your page with them. Instead, they start with a hash ("#"), and are called ids. (Ignore the "div" prefix to the "#" for now.)
Apart from the difference in its technical name, that is "id" instead of "class", and the fact that they can only be used once on a page, ids behave the same way as classes, and are customized in exactly the same manner. The only reason why ids are used here instead of classes is because they refer to unique sections of your page: that is, on a two column site, there is only one left column, one right column, one header and one footer. In fact, if I really wanted to, I could have made the Layout Wizard use classes instead of ids, but I thought this way was more logical. As I said before, CSS does not compel you to use any specific feature, so the decision of what to do lies completely with the web designer.
Note that I will often refer to the labels in the "Modify Style" panel as "selectors". Classes and ids (among others) are collectively referred to as "selectors" in technical lingo.
Look for the line that begins "@media". If the small box on its left says "-", click it once so that it becomes "+" (see picture below). The "@media" section shows the styles that only come into effect when your site is viewed on a small screen (like a smartphone), which is why it shows duplicate "div#tswsidecol" and "div#tswcontent" selectors. If we leave it in its expanded state (ie, with the "-" showing), you may accidentally configure the wrong selectors in the following steps.
(Yes, this step is just a precaution, but I recommend that you do it anyway, since mistakes are easy to make.)
To change the colour of the background of a particular portion of your page, right click its selector in the "Modify Styles" panel and click "Modify Style..." in the menu that appears.
For example, if you want to change the background colour of the content column, right click
div#tswcontent" and select "Modify Style...". Likewise, if the side column is
what you want to modify, right click "
div#tswsidecol" and invoke the "Modify Style"
dialog box from there. And so on. The list of selectors matching the different parts of your page is
In the "Modify Style" dialog box that appears, make sure that the name in the "Selector" field is the one you want to modify. If not, it probably means you clicked the wrong line, and you should use the "Cancel" button to dismiss the window and try again.
Click the "Background" line in the left column.
Locate the "background-color" field on the right side. By default, it should say "#fff" (which means white), unless you have changed the colour in the Layout Wizard when you generated the page. There should be a rectangle to the right of this field that shows the current background colour. Click this rectangle. (Yes, it's clickable.)
A dialog box with the title "More Colors" will appear. Click the hexagon with the colour you want followed by the "OK" button. If you can't find anything you like there, clicking the "Custom..." button will bring up another dialog box with more choices.
You will be returned to the "Modify Style" dialog box, where your new colour will be shown in the rectangle you previously clicked. Click the "OK" button.
The appropriate section of your page will now sport the new colour.
This may or may lead to results you like. The page will probably look worse if you have changed the colour of the side column, since the background colour ends abruptly where the text ends, making the left column shorter than the right.
There is no single method that can solve this for every site. (Actually, there is, but if you use that, your site will only be compatible with the state-of-the-art web browsers and not the older ones that are still used by some people today. And since Expression Web's rendering engine is also old, it probably won't be able display the modern method correctly, leaving you to work on your site blind.)
Below are some possible solutions. You will have to choose the method that works best for your particular design.
One solution is to make the left and right columns the same colour. That way, the fact that your two columns are actually uneven won't stand out quite so much. This is the method adopted by thesitewizard.com for its pages.
Another method is to change the colour of the "
to the same colour as the side column. This selector functions a bit like the "body" tag
you met in chapter 3. It is a container that holds everything in the header, footer and
both columns. Setting it to the same colour as your side column causes everything behind
that column to have that colour, hiding the fact that your left
column is actually quite short.
A side effect of doing this is that if your header contains a logo that is narrower than the
width of the browser window, the background to that header will remain white (the default colour set
by the Layout Wizard). If this leads to the page appearing ugly, you may want to change the background colour of
div#tswheader" as well.
In addition, if you change the "
div#tswcontainer" colour, you will notice that
there is a white border around your page. To change that border to the same colour as the
rest of the background, modify the colour of the "
body" selector too.
You can see an example of these changes on the Two Column with Header and Footer demo page, although it will not look exactly like your page since I did not put an actual logo on the page, but used a white background with black words in the masthead to mimic it. Note that the demo page was not specifically created for this Expression Web tutorial, but it nonetheless shows the result of making the background of the container and body the same colour as your left column.
If your content column is shorter than your side column, rather than the other way around,
you may prefer to give "
div#tswcontainer" the same colour as "
instead. This works the same way as the option above: masking the shorter column by making the
background behind it the same colour.
Save your work with "File | Save all". You definitely need to use "Save all" instead of "Save" because changing the background colours of your page modifies the "style.css" file.
It's also possible to put a picture as the backdrop to your words.
Copy the picture to the "images" folder the way you did your logo and foreground pictures. See chapter 2 if you have forgotten how to do this.
Follow the same procedure above to get the "Modify Style" dialog box
for the appropriate section of your page. For example, if you want to set a background picture
for your right column, right click the "
div#tswcontent" line in the "Modify Styles" panel
and select "Modify Style...".
Click the "Background" line in the left column.
Click the "Browse..." button for the "background-image" field.
This opens the "Picture" dialog box. Doubleclick the "images" folder to open it, select the relevant picture, and click "OK".
Decide how you want the picture to appear if it is smaller than the space available. This is done with the "background-repeat" field. By default, if you don't set anything here, and the picture is smaller, the web browser will tile your picture both horizontally and vertically throughout that section so that it covers the entire surface. If this is not desirable, click the drop down arrow for that field and select "no-repeat" to get the picture to appear only once, "repeat-x" to get the picture to only tile horizontally, or "repeat-y" to get it to tile vertically.
If you chose "no-repeat", you can specify the position of the picture using the "(x) background-position" (for the x-axis) and "(y) background-position" (for the y-axis). Either choose "center", "left" or "right" from the drop down box or enter a number. In the latter case, 0% indicates that the image is to be flushed to the left for the horizontal position (x-axis) or aligned at the top for the vertical position (y-axis), and 100% means to flush right (x-axis) or to the bottom (y-axis). Numbers between these two values will cause the image to be positioned proportionately at a spot between the two extremes.
The "background-attachment" field determines what happens to the picture when your visitor scrolls the page. If nothing is selected, it will be as though you chose "scroll", where the picture moves along with your foreground words. The alternative is "fixed" where the image remains at its specified location in the window even when the page is scrolled. Note that you won't be able to see the effect of selecting "fixed" in Expression Web. You can only see it in a real web browser.
Type the word "contain" (without the quotation marks) into the "(x) background-size" field. This will cause the web browser to scale the image so that it can fit into the width of the column should the picture ever be larger than the column itself (as it might be on a smartphone).
When you're done, click "OK". The picture you inserted should appear on your page.
Save your work with "File | Save All".
As always, check your work in a web browser using "File | Preview in Browser". For this chapter, you will want to make sure that your background (either colour or picture or both) does not hinder your visitor's ability to read your page. Resize your window to mobile phone sizes and check your page there too.
In the next chapter, you will learn how to make words and pictures into clickable links.
You are here:
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 https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as: