How to Change the Background of a Website with Expression Web

Chapter 4: Changing the Background Colour and Adding a Background Picture


How to Change the Background of a Website with Expression Web

by Christopher Heng, thesitewizard.com

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.

Goal of This 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.

How to Change the Background Colour

  1. Open your web page in Expression Web, if it is not already open.

  2. 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.

  3. Look at the "Manage Styles" panel at the bottom right 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 "Manage Styles" panel as "selectors". Classes and ids (among others) are collectively referred to as "selectors" in technical lingo.

  4. 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.

    The Manage Styles panel before and after collapsing @media

    (Yes, this step is just a precaution, but I recommend that you do it anyway, since mistakes are easy to make.)

  5. To change the colour of the background of a particular portion of your page, right click its selector in the "Manage 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 mentioned above.

  6. 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.

  7. Click the "Background" line in the left column.

  8. 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.)

  9. 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.

  10. 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.

  11. 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.

    • Giving the left and right columns the same colour

      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.

    • Giving the container the same colour as the side column

      Another method is to change the colour of the "div#tswcontainer" selector 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.

    • Giving the container the same colour as the content 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 "div#tswcontent" instead. This works the same way as the option above: masking the shorter column by making the background behind it the same colour.

  12. 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.

An Aside, for The Adventurous Who Chose a 3-Column Layout

(This boxed section is only for those who chose a 3-column layout, contrary to my suggestions in chapter 1. The majority, that is those who followed by recommendations and chose a 2-column layout, should skip to the next point. Otherwise, you'll just confuse yourself unnecessarily.)

If you chose a 3-column layout for your website instead of 2-columns, the tags are slightly different:

div#tswsidecol — sets the colour of one of the side columns
div#tswothersidecol — sets the colour of the other side column
div#tswcontent — sets the colour of the content column
div#tswfooter — sets the colour of the footer
div#tswheader — sets the colour of the header
div#tswcontainer — sets the colour underneath div#tswsidecol
div#tswcentrecombo — sets the colour underneath div#tswothersidecol

If you opted to have the left column as the bottommost column in mobile phone order, div#tswsidecol refers to the left column, and div#tswothersidecol the right. Otherwise it's the other way around. If you accepted all the defaults in the Wizard when you generated a 3 column layout, div#tswsidecol is the left column.


How to Set a Background Image

It's also possible to put a picture as the backdrop to your words.

  1. 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.

  2. 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 "Manage Styles" panel and select "Modify Style...".

  3. Click the "Background" line in the left column.

  4. Click the "Browse..." button for the "background-image" field.

  5. This opens the "Picture" dialog box. Doubleclick the "images" folder to open it, select the relevant picture, and click "OK".

  6. 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.

  7. 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.

  8. 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.

  9. 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).

  10. When you're done, click "OK". The picture you inserted should appear on your page.

  11. Save your work with "File | Save All".

Testing in a Web Browser

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.

Next Chapter

In the next chapter, you will learn how to make words and pictures into clickable links.

Copyright © 2016-2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://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 Expression Web Tutorials »

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 https://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 or distribute this article in whole or part, in any form.

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 a Website with Expression Web





Home
Donate
Contact
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.