Colorful sidebar

Backround color

You'll see in this layout the light grey backround color only appears as long as there is content in the div. You could add more black paragraphs there, but that will not allow you to have the background color go all the way down to the footer. To do that, we'll need to try a different angle.

Instead of using background-color in the sidebar div, we'll put a background-image in the container. Remember, the container essentially sits underneath the sidebar in the order of things, so if we don't put a color in the background of the sidebar, whatever sits underneath it will show through.

Here's a yellow bar we can use for this lesson. Save it into your images folder:

Adding the image

Go to the container ID and add the bolded text to your CSS:

#container {
background: #fff;
margin: 0 auto;
width: 980px;
border: 1px solid #000;
padding: 10px;
background-image: url("images/yellow.png");
background-repeat:repeat-y; }

This will put the image in the backround and repeat it on the y-axis, which is the verticle axis.

Now you have the illusion of a yellow bar running down the left side of the page. If you want the bar on the right side, you'd need to add the background-position property, with the value of right:

background-position: right;

Hide the bar elsewhere