HTML and CSS Reference
In-Depth Information
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-image: url(“../images/icon-newsletter.png”),
url(“../images/bg-newsletter.png”);
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).
Background Gradients
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
url()
function.
