I do this because if either the header or footer becomes taller than
its background graphic (which shouldn??™t happen but might if someone
inadvertently adds too much text, or if the user sizes up the layout
to a really large size from the View menu), then there won??™t be a
gap below the background graphic??”instead, it will repeat vertically.
Also, in case the graphic doesn??™t load at all, I??™ve added a gray background
color. A background graphic is always displayed on top of a
STYLIN??™ WITH CSS - CHAPTER 7 252
background color, so the color doesn??™t normally show if the graphic
?¬? lls the background, as it does here. While always stating a background
color along with any background image is good practice, it
is especially important in this case, as the light-colored text I will
have to use over these dark background graphics will barely show
on the default white background color of the page if the background
graphic doesn??™t load for some reason.
I also added a graphic of overlapping circles into the twocolwrap div
that encloses the left and center columns, and added another larger
graphic based on the cover of the book into the main_wrapper div.
div#main_wrapper {
background:url(../images/cover_circles.jpg) no-repeat
300px 0;
}
#twocolwrap {
background:url(../images/full_arc.gif) no-repeat;
}
FIGURES 7.
Pages:
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293