Web Design with HTML and CSS

168

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

3 In your internal style sheet, locate the current rule for the footer. Add a new rule

(highlighted in red) to apply a background image from your images folder:

#footer {

clear:both;

background-color:#BA2B22;

background-image:url(images/footer_background.jpg);

background-repeat:no-repeat;

}

Save the page and preview it in your browser.

Your footer now has a background image applied.

Your background image is now applied to the footer. This allows the footer text to be

visible above it. Notice the background-repeat property in the code above. CSS

background images tile by default, so setting a value of no-repeat ensures that this

image will never tile. This code might seem redundant when your background image

is the same size as your footer; however, if the footer expands, the code will ensure the

image does not tile.

Set the footer dimensions to match the background image as indicated in the next step.

4 Modify your footer rule as follows (highlighted in red):

#footer {

clear:both;

background-color:#BA2B22;

background-image:url(images/footer_background.jpg);

background-repeat:no-repeat;

width:960px;

height:128px;

}

Save the fi le and preview it in your browser. Your footer is sized correctly and you can

adjust your paragraphs. Use another contextual selector as shown in the next step.