11.5. Using a Background Image as a Fixed Canvas

As you know from your experiences designing and using Websites, if you define a graphic as the background on a page, the graphic will repeat, or tile, itself to fill up the entire client area of the browser. It will also scroll along with any content that is placed on top of it. This is the normal behavior of backgrounds.

However, with CSS, you can change both of those characteristics. You can define the graphic so that rather than tiling, it simply appears once where it is positioned. Also, more interestingly, you can instruct the background graphic to remain in place while other objects, including text, placed on top of it, effectively scroll over it.

Figure 11-9 and Figure 11-10 show this effect as clearly as it can be shown on a "dead" page. Figure 11-9 shows how the page looks before any scrolling takes place. You can see that the picture of our happy fisherman is positioned in the lower right of the page.

Figure 11-9. Fixed Background Image Behind Unscrolled Text

In Figure 11-10, the numbered list has scrolled down several items, but as you can see, the fisherman image that serves as the background for this text remains firmly fixed in place.

Figure 11-10. Scrolled Text Leaves Fixed Background Image in Place

Here is the CSS rule that produces the fixed background effect demonstrated in Figure 11-9 and Figure 11-10.

body {
  background: url(fisherman.jpg) fixed no-repeat;
}

I used the background shorthand and provided the URL of the image to be used as the background (enclosed in a url() wrapper), gave it a fixed position and told it not to repeat or tile.

Earlier in the book, backgrounds have all been colors. If you define both a color and an image URL for a background, the image completely covers the colored background, but if the image can't be located or loaded for some reason, the colored background will be visible. If you have artistic talent, you can also define transparent areas of a graphic and then define both an image and a color for the background. In that case, the color will show through the transparent regions of the image.

One of the nicest applications of this fixed-background design I've seen is Eric Meyer's widely applauded Complex Spiral demo. This demo's primary page is shown in part in Figure 11-11. Notice that he has achieved the illusion of translucency in the scrolling text block. To do this, he uses a fixed background within the div that contains the content. Unfortunately, that nifty trick works only on a very limited number of browsers with first-rate CSS1 support, so I'm not going to teach you how to do it here. Read Meyer's site if the notion intrigues you; he offers a very clear explanation for how to execute that design. For practical purposes, you'll probably want to stick to using fixed background images only for the body element, which is more widely supported.

Figure 11-11. Illusion of Transparency on Eric Meyer's Complex Spiral Demo Site