Cascading Style Sheets (CSS) by Example

Using a Fixed Sidebar Background

The next example is also a relatively simple layout design, but it's one that makes use of a special feature of CSS, a fixed background, to good effect. A fixed background image stays fixed relative the canvas (the background of the page), instead of scrolling with the page's content when it is scrolled.

For this example, you're creating a page that uses a fixed background to create the look of a ring-binding running down the side of the page. The page you create is a list of gasoline conservation tips.

You use a different example file, savegas.html, to create this example. Just open it from your working folder. You can also type it in, if you wish, as shown in Listing 14.2 (see Figure 14.3).

Figure 14.3. This ...