Web Design with HTML and CSS

178

Working with CSS background images

Web Design with HTML and CSS Digital Classroom

The background-image property is pointing to a small gradient image located in

your images folder. The height property gives the innerwrap some structure; this value

of 450 pixels is arbitrary, and you will return to this shortly. For now, save the fi le and

preview it in your browser.

Background-images tile by default.

Your page looks strange because by default, background images tile both horizontally

and vertically. In order to correct this, you need to tile the image horizontally (the

direction of the x-axis).

3 In your text editor, add the following property and value (highlighted in red) to the

innerwrap rule:

#innerwrap {

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

background-repeat:repeat-x;

height:450px;

}

Save the page and preview it in your browser. Your background image now tiles across

the top of the innerwrap div, which creates the intended eff ect.