Recipe 2.7 Fixing the Background Image

‚ < ‚ Day Day Up ‚ > ‚

Recipe 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(http://flylib.com/books/3/26/1/html/2/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(http://flylib.com/books/3/26/1/html/2/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 other than body . For example, try the heading elements when designing a review for a movie or concert. The following CSS rule can create the interesting surfing experience:

h1, h2, h3 {

 font-size: 200%;

 background-image: url(http://flylib.com/books/3/26/1/html/2/bkgd2.jpg);

 background-repeat: no-repeat;

 background-attachment: fixed;

 background-position: center;

 padding: 1.5em;

 text-align: center;

 color: white;

}

Because of the padding and light color on the headings, there is enough room to see the background image "through" the elements as well as to read the headlines. As the visitor scrolls the web page reading the review, she will see the rest of the image, as shown in Figure 2-16.

Figure 2-16. The photo coming through the headings instead of the body element

At press time, only Mozilla and Netscape 6+ supported the application of background images as fixed attachments to block-level elements like header elements used in this Solution. Internet Explorer 5.x and 6 for Windows repeat the background image in each header element.

Recipe 2.8 Placing a Page Border

Problem

You want to place a visual frame or border around a web page, as in Figure 2-17.

Figure 2-17. A framed web page

Solution

Use the border property on the body element:

body {

 margin: 0;

 padding: 1.5em;

 border: 50px #666 ridge;

}

Discussion

The border property is a shorthand property, in that it enables you to set the width, color , and style of the border around an element in one step instead of three. If you didn't use this shorthand property in the preceding Solution, you would have to replace the line that reads border : 50px #666 ridge; with the following three lines:

border-width: 50px;

border-color: #666;

border-style: ridge;

You can create a framing effect with other styles as well, such as dotted , dashed, solid, double, groove, inset, and outset (see Figure 2-18).

Figure 2-18. The available border styles in CSS

Note that groove style is the inverse of the shades of shadow as seen in the Solution, which uses the ridge value.

The only browser incompatibilities to worry about are that in Internet Explorer 5 for Macintosh and Internet Explorer for Windows, the dotted style appears as aliased circles, whereas in Netscape 6+, Mozilla, and Safari, the dotted style appears as blocks.

You also can place a stylized border on images as well. Instead of having a default solid line, try experimenting in your designs with groove or double borders as shown in Figure 2-19:

img.left {

 float: left;

 margin-right: 7px;

 margin-bottom: 3px;

 border: 4px double #666;

}

Figure 2-19. A double border around an image

Flylib.com

Category list

Similar pages

Recipe 2.7 Fixing the Background Image