O'Reilly logo

Cascading Style Sheets (CSS) by Example by Steve Callihan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required