CSS Cookbook

2.7. Fixing the Background Image

Problem

You want a background image to remain in the browser window, even as the user scrolls down a web page.

Solution

Use the background-attachment property set with a fixed value, like so:

body {
 background-image: url(bkgd.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
}

Discussion

By using this technique, you are locking down the background image. So, even if a visitor scrolls, the image remains where you placed it originally. Another acceptable value for background-attachment is scroll, which is the default value. So, even if you don’t specify scroll, the background image moves up with the rest of the document as the visitor scrolls down.

For example, imagine you want to post on your web page a photo of a recent trip, and you want the photo positioned on the left side of the page and your text on the right. As the reader scrolls down to read more about the trip, the photo from the trip stays in place, as shown in Figure 2-15. Here’s the code:

body {
 background-image: url(bkgd2.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: -125px 75px;
 margin: 75px 75px 0 375px; 
}
h1, h2, h3 {
 padding-top: 0;
 margin-top: 0;
 text-transform: uppercase;
}
p {
 text-align: justify;
}

Figure 2-15. The photo staying in place as the visitor scrolls

To take this further, you can lock down the image on block-level elements ...