Adding Presentational Styles - CSS3 Foundations - page 90

Much like the border properties, background properties also have a shorthand property, simply called back-
ground .
Rather than have up to eight declarations to style a background, you can use the background shorthand with the fol-
lowing syntax:
background: background-image background-position background-size
repeat-style attachment background-origin background-clip
background-color
When you use multiple background images, you should specify background-color only on the last layer of a
background.
1. In styles.css, find the #newsletter rule set and remove the following declarations:
background-color: #00ACDF;
background-image: url(“../images/icon-newsletter.png”),
url(“../images/bg-newsletter.png”);
background-repeat: no-repeat, repeat;
background-position: 91% 2%, 0;
2. Add a shorthand declaration:
background: url(“../images/icon-newsletter.png”) no-repeat 91% 2%,
url(“../images/bg-newsletter.png”) repeat 0 #00ACDF;
3. Save styles.css.
The shorthand declaration achieves the exact same styles as was originally achieved. Because the newsletter box had
two background images applied to it, a comma separates the two shorthand values. Finally, although you can have
multiple background images, you can have only one background color, so you add background-color at the end
of the last background layer.
CSS Image Replacement
Sometimes, you may want to show an image in place of text. Take the Cool Shoes & Socks link in the footer of the
page for example. At the moment, it's just text, but really, it would look nicer if it was a small version of the logo.
Add a background image to the footer link:
1. In styles.css, add the following rule set:
.small-logo a {
background: white url(“../images/logo-small.png”) no-repeat center;
display: block;
min-height: 11px;
width: 162px;
padding: 5px;
}
2. Save styles.css.
This rule set adds a small version of the Cool Shoes & Socks logo as a background image, makes the <a>
element a block to fill a space of 11px × 162px and gives it a small amount of padding ( padding is
covered in Chapter 7 and display in Chapter 9).