Adding Presentational Styles - CSS3 Foundations - page 82

1. In styles.css, below the background-repeat declaration you added to the #newsletter rule set, add
the following:
background-position: right top;
2. Save styles.css.
As shown in Figure 5-14, the background image is now positioned to the far right and at the top of the newsletter
box. This declaration is the equivalent of background-position: 100% 0%. It's just a little nicer to read
and write a declaration like this when it's written using keywords!
Figure 5-14 The background image positioned to the right and at the top of the newsletter box.
If only one of the background-position values is specified, the missing value is assumed to be center , so if
you use the declaration background-position: right , the background image is positioned to the right of
the newsletter box but vertically centered.
The position of the background image might not make a huge amount of sense at the moment, but when you give the
page more structure in Chapters 6-9, it will!
In preparation, give the background image a more accurate position that will better suit the newsletter box when it
has more structure:
1. In styles.css, change the background-position declaration to
background-position: 91% 2%;
2. Save styles.css.
background-attachment
Initial value: scroll | Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
By default, when you scroll the viewport or an element that can scroll (you learn how to make an individual element
scrollable using the overflow property in Chapter 9), a background image moves with the scrolling of the view-
port or element.
body {
background-color: #f5f5f5;
background-image: url(“../images/bg-body.jpg”);
background-attachment: fixed;
font-size: 62.5%;
}