Completed files add-completed in the chapter 7 folder.
1. Add a page background. In the add-starting-point folder, there are two images,
both of which are gradients. One is a black gradient, fading toward gray at its bottom
edge; this is intended for a page background. Add this by adding the following
rule to the style sheet (after the add your code below comment):
body {
background: #4d4d4d url(page-background.gif) repeat-x;
}
The repeat-x value ensures that the background tiles horizontally only; the color
value #4d4d4d is the color of the bottom pixel of the gradient image, ensuring the
gradient seamlessly blends with the web page background.
Adding padding, margins, and backgrounds to a layout
PAGE LAYOUTS WITH CSS
265
7
2. Add a border to the wrapper. Amend the #wrapper rule to add a border around
the wrapper. Note that the wrapper in this example sits flush with the top edge of
the browser window view area, and so no top border is needed. That??™s why the
border-top pair is added, overriding the previous rule for the top border only.
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
}
3. Add a wrapper background. If you test the page now, the background shows
behind all of the page??™s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div:
Note that in some examples in this book, selectors are used multiple times, such as
body here.
Pages:
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367