Web Design with HTML and CSS

Working with CSS background images

Lesson 8, Advanced CSS Layout 181

1 In your 08_layoutwork.html page, locate the rule for the innerwrap and delete the entire

height:450px; line.

Save the page and preview it in your browser. Your background image disappears because
without a defi ned height, there is no content inside the innerwrap div.

Your innerwrap div has no defi ned height so it collapses and hides the background image.

The sidebar and maincontent divs are contained within the innerwrap div; however,

these elements are fl oated, and fl oated elements are removed from the fl ow of HTML.

Also, the sidebar and maincontent div do not have height values, so the innerwrap

cannot expand. You will now add code that solves this problem.

2 In the CSS below the #innerwrap rule, add a new empty rule (highlighted in red):

#innerwrap {

background-image:url(images/inner-wrap_bg.png);

background-repeat:repeat-x;

}

#innerwrap:after{

}

The :after is a special CSS property that allows extra content to be added at the end of

an element using CSS. You will now add a series of rules that force the innerwrap to act as

though there were content inside.