Background Images

This demo is an example of using background images for just about every element on the page. Probably the key feature people will most be interested in is converting the side columns from using borders as their background colors to using images.

The trick on the side column conversions is to simly remove the borders from #outerColumnContainer and apply padding to one side, and margin to the other. Why does it have to be this way? Because if you want different background images for each side column you will need to find two separate DIVs that carry the full height of the columns to apply your background images to.

In this case, we can use #outerColumnContainer to handle one column. This would be the column on the side that has padding applied to it. Background images will tile through the padding of an element. So we use padding to reserve space for the column while still being able to tile an image across that space.

On the other side of #outerColumnContainer we have margin space. Why margin? Because a background image won't tile across margin space. Instead, whatever is below that element is what will appear in that margin area. In this case, the parent element, whose background color and image we'll see through that margin space, is #pageWrapper So simply apply a repeating background image to #pageWrapper and that image will come through as the background image for that column that's on the same side as the margin space applied to #outerColumnContainer

All of this is done in an add-on stylesheet, bgImages.css. You can browse that file to see how these background images are applied to various areas.

Opera 6 Note

Under Opera 6, the hnav buttons don't have background images, but the vnavs do. This is because Opera 6 needs the background image in the anchors (buttons) to already be in memory. This can be achieved if the image is used somewhere else on the site.