WEB STANDARDS CREATIVITY

Background
Next, we apply the main background image (Figure 1-6) to the element. Although much larger than ideal, the JPG
image will work as a tile. I would have preferred to use the GIF format for background images, but the level of detail and
image gradation used for this large background image demanded the greater flexibility of the JPG format.
Figure 1-6. The main background image, which will be placed in the center and tiled horizontally
We use background shorthand in the CSS to place the tile in the center, at the top, and ensure it tiles only horizontally. Looking
at the CSS for the body selector, you’ll see that alongside the main font rules and other items, all rules for background
are combined using CSS shorthand, with the order background-color, background-image, background-position, background-attachment,
and background-repeat.
body {
margin: 0;
padding: 0;
font-size: 95%;
font-family: Georgia,'Lucida Grande',Verdana,sans-serif;
text-align:center;
color: #333;
background: #C6C2B6 url(images/background.jpg) center top fixed repeat-x;
}
As the image is repeating horizontally (repeat-x), this takes up the whole width of the site, no matter how wide the browser
window is. However, the page background-color is sampled on the flat color at the base of the background tile. The image
combined with this color will complete the whole background and give the impression of a much taller background image.
Within the shorthand, we used background-attachment:fixed to prevent the background from scrolling with the rest of the
page, and background-position:center top to make sure that the midpoint of the first background image tile appears in
line with the midpoint of the browser’s window. All other tiles needed to fill the width will be placed left and right of this
initial centered image.
chapter 1 Semantic Structure, Dirty Pretty Presentation
11