Expression Web help

Join our community


Styling the footer

The footer is usually used for a back to the top link and or web site/company details.

On this occasion, we will use it as an introduction to using graphics in your styling. First we need a background tile. It just so happens that i have one here.


Right click the image and save to your web site files. Remember where you put the image but anywhere in your web files will do.

Click inside the #footer <div>
It will now be highlighted in the Manage styles task pane

Select modify style

From the category list select background

Browse to the image that you have saved

You will no doubt see the preview!

This is not how it is supposed to look so we need to tame the style a little

Click on the Background repeat drop down

Select repeat x

Select Position from the Category list

For the height type


make sure px is selected

Click OK

You can see now we have controlled the style.

If you want, you can type a back to the top link or add company details.

Your page should be looking like this.

Expression Web tutorial - Styling the Footer. A short flash tutorial explaining how to use graphics with CSS to style the footer of a page.

Our next tutorial will show you how using your template as a DWT, you can create fast loading and extremely easy to update web sites.


Microsoft MVP


Our forum feed can be found here

Add RSS to Yahoo

Reader not listed? Click here for more options

Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now