HTML and CSS Reference
In-Depth Information
property) overrides the default scrolling behavior and allows the background to remain in the same position
as content scrolls over it. This keeps our two background images affixed to the top and bottom edges of
the window even as the foreground content moves and scrolls over them.
Although multiple backgrounds are well supported in all the latest browsers, older browsers from just a few
years ago didn't support this feature of CSS3. When a browser encounters a style declaration it doesn't
understand, it just ignores the declaration and moves on parsing the next one. When confronted with an
unsupported value for the
background
property, older browsers won't apply any background to the
element at all. We can accommodate those less capable browsers by first declaring a background the old-
fashioned way, with only one image, then adding a second declaration with multiple images for newer
browsers that understand it. You can see the style rule for the
html
element in Listing 10-11. The later,
multi-image declaration overrides the previous one; it's the cascade in action.
Listing 10-11.
Applying multiple, fixed, tiling background images to the
html
element
html {
background: #fffae1 url(../images/bg-top.png) left top repeat-x fixed;
background: url(../images/bg-top.png) left top repeat-x fixed,
#fffae1 url(../images/bg-bottom.png) left bottom repeat-x fixed;
}
Figure 10-5 shows the result, but you can't really appreciate the fixed scrolling effect in a printed
screenshot. The lighter bottom image sticks to the bottom edge of the browser window even though the
content overflows down and out of view. As the window scrolls vertically, more content comes into view
from the bottom as content scrolls out of view at the top, but both the top and bottom background images
stay right where they are, fixed to the edges of the viewport.
Figure 10-5.
Our comic-inspired, dot-patterned background, accomplished with two images in two positions, filling the
html
element.
