Working with CSS background imagesLesson 8, Advanced CSS Layout 1777 In your text editor, return to 08_layoutwork.html. Locate the rule for the #wrap div.
Modify the color value (highlighted in red) and remove the commenting code:
#wrap {
background-color:#ffffff;
width:960px;
border:thin solid black;
margin:0 auto;
}
Save the fi le and preview it in your browser. With the wrap div using the white background,
your page is beginning to take shape. Now you’ll add some images.
Working with CSS background images
There are two ways to add images to a web page. The fi rst way uses HTML to insert an
inline image. You have already added an inline image when you inserted your site logo. Inline
images rely on the HTML image tag, and the code is similar to this:
<img src="images/smoothieworld_logo.jpg" width="200" height="150"
alt="smoothieworld_logo" />
The second way to add images to a web page is by using CSS background images. You
should generally use CSS background images as decorative elements and not primary
content. In the following steps, you will add a CSS background image to the div container
named #innerwrap that is nesting your two columns.1 In your 08_layoutwork.html fi le, locate the div tag with the ID innerwrap. Here is
a list of the containers currently on your page, from the top of your HTML code to
the bottom: wrap div, masthead div, mainnav div, and innerwrap div. Currently, the
innerwrap div is the parent container of the sidebar and maincontent div, which are
the columns you created in Lesson 7.
The innerwrap is currently unstyled; however, its function right now is to provide a
container for the two columns. Note the behavior of this container in the next few steps.
2 In your internal style sheet, locate the wrap rule and below it add a new rule for the
innerwrap:
#innerwrap {
background-image:url(images/inner-wrap_bg.png);
height:450px;
}