HTML and CSS Reference
In-Depth Information
Chapter 8
Adding Backgrounds
The secret of good web design is drawing the visitor's eyes to important parts of the page. Background colors
and images help to break up the page and focus attention. Although some images are an important part of the
page content, and need to be embedded in the HTML using
<img>
tags, others are simply decorative touches
that should be added through CSS. Using CSS for background images not only keeps your HTML markup less
cluttered and easier to maintain, but it also gives you a considerable amount of control over position and size.
The CSS3 Backgrounds and Borders module became a candidate recommendation in April 2012, and it may
well have been formally approved by the time you read this. In other words, the features described in this chapter
can be used with confidence in recent browsers. However, older browsers—particularly IE 8 and earlier—support
only the CSS2.1 specification. Fortunately, CSS2.1 covers the most important aspects, such as background color
and images, the position of background images, and basic controls over how images are repeated. The CSS3
features can be described as “nice to have” rather than essential.
Because backgrounds and borders are such a large subject, I've split them into separate chapters. This one
deals with background colors and images.
Chapter 9
looks at borders.
In this chapter, you'll learn about the following:
•
Changing the background color of an element
•
Adding background images and controlling how they repeat
•
Adjusting the position of background images
•
Using CSS sprites to display icons
•
Changing the extent of a background
•
Scaling background images
•
Dealing with older browsers that don't support CSS3 features
Controlling Backgrounds with CSS
CSS2.1 has six properties that handle backgrounds. CSS3 improves the functionality of some of the existing
properties and adds another three. Because they're so widely supported, all nine properties are listed in Table
8-1
.
