HTML and CSS Reference
For example, giving the background image applied to the <body> element a declaration of background-at-
tachment: fixed causes the background image to remain in place when you scroll the page (as opposed to the
background image moving with the scrolling).
If you want to try this example yourself, depending on your screen size, you might need to give the body selector a
temporary declaration of height: 2000px to make the page tall enough to require scrolling.
Applying Multiple Background Images
Browser support: IE 9+, Firefox 3.6+, Chrome 1+, Opera 11+, Safari 1.3+
CSS Level 3 introduces multiple background images per element. Multiple background images are sup-
ported in all modern browsers, but not in Internet Explorer versions 6, 7, and 8. Because of this, it's best to use mul-
tiple background images only if they're not important, such as those used for decorative purposes.
Add another background image to the newsletter box:
1. In styles.css, change the background-image , background-repeat , and background-posi-
tion declarations in the #newsletter rule set to
background-repeat: no-repeat, repeat;
background-position: 91% 2%, 0;
2. Save styles.css.
Here, you specify two url() functions for the background-image and separate them with commas, which now
apply two background images to the newsletter box. Likewise, you give the background-repeat and
background-position declarations secondary values, again, by separating them with commas.
So, the secondary background image repeats (filling the whole newsletter box) and is given a position of 0 (it's set to
repeat so the position doesn't matter).
Prior to CSS Level 3, a gradient (an image that blends from one color to another) had to be made in a graphics ap-
plication such as Adobe Photoshop or Fireworks, but now you can do it using nothing but CSS! Technically, a gradi-
ent is an image that the browser generates so it can be applied to—and in place of—any element that accepts the