Steps to Success
We can use the background property of CSS to add interest to our containter.html page.
Instead of using a solid background colour for the wrap, let's use a background image
- Right mouse on the image below and save image as bg_wrap.gif.
Save this image into the images folder in steps folder
- Open the CSS layout.css in Notepad.
Add the background image to the wrap rule.
Add the following code (in red) to layout.css
- Save and preview in a browser.
It should look like this:
- Let's add the background image to the footer.
We'll use image xhtml_h1_bg.gif which is already in your images folder from a previous lesson.
Here it is again if you need it.
Add the following code (in red) to layout.css
- Save and preview in a browser.
It should look like this:
/* CSS document */
#wrap{
background-color:#000066;
width:800px;
background-image:url(../images/bg_wrap.gif);
background-repeat: repeat-y;
margin: 0 auto;
}
/* CSS document */
#footer{
background-color:#990000;
color: #999999;
padding: 6px;
background-image: url(../images/xhtml_h1_bg.gif);
background-repeat: repeat-x;
background-position: bottom;
}
Having problems? You can view the page live here .
View the page source and view the css.
Here is a demo on how to view the css of a web page.