| As discussed in the previous sections, CSS lets you define the background color and graphic for any individual element on the page, giving you much greater versatility when it comes to designing your Web pages. The background shorthand property (Table 5.8) also allows you to define the background image and color for an entire page or single element by rolling these into a single quick and compressed declaration. From a coding standpoint, this method is better because it takes up less space, but requires that you remember what each of the values in the list is for. Table 5.8. Background ValuesVALUE | COMPATIBILITY |
|---|
<background-color> | IE3, FF1, S1, O3.5, CSS1 | <background-image> | IE3, FF1, S1, O3.5, CSS1 | <background-repeat> | IE3, FF1, S1, O3.5, CSS1 | <background-attachment> | IE4, FF1, S1, O3.5, CSS1 | <background-position> | IE3, FF1, S1, O3.5, CSS1 |
In this example (Figure 5.9), the background image of the lizard popping out of the chimney has been placed in the top right corner of the page and will stay fixed even when the page scrolls (Figure 5.10). In addition, the level 2 heading has a textured area created using a background image (Figure 5.11) set to repeat vertically (Code 5.4). Figure 5.9. The background image for the page (the lizard, bill) appears to the extreme right of the page. 
Figure 5.10. Although the text has scrolled down, the body's background (poor Bill the lizard) image stays frozen in place. 
Figure 5.11. The chapter title heading has its own distinctive background that draws attention: a rough texture that repeats only on the left side and is flat gray in the rest. 
Code 5.4. In this code, a background image is defined for the body of the page. This image is instructed not to repeat, to be fixed, and is positioned up and to the left using negative values. The h2 tag has also been defined with a rough background graphic that is repeated only across the left side of the element. Padding is included on the left for the heading so that the chapter title does not overlap the rough area. To define the background: 1. | background:
Start your declaration by typing the background property name, followed by a colon (:). Then define a background value.
| 2. | white
Type a value for the color you want the background to be, followed by a space. This value can be the name of the color or an RGB value. See "Values and Units Used in this Book" in the Introduction for more details.
Alternatively, you could type transparent, which tells the browser to use the background color of elements behind this element.
| 3. | url(alice05.gif)
Type url() with a URL for the location of the background image in the parenthesis (Table 5.4), followed by a space. This location is the image file (GIF, JPEG, or PNG) that you want to use as the background and is either a complete Web address or a local filename.
Alternatively, you can type none instead of a URL, which instructs the browser not to use a background image.
| | | 4. | no-repeat
Type a value for how you want your background to repeat, followed by a space. Use one of the following options (Table 5.5):
repeat instructs the browser to tile the graphic throughout the background of the element both horizontally and vertically. repeat-x instructs the browser to tile the background graphic only horizontally. In other words, the graphic repeats in one straight horizontal line along the top of the element. repeat-y instructs the browser to tile the background graphic only vertically. In other words, the graphic repeats in one straight vertical line along the left side of the element. no-repeat causes the background graphic to appear only once and not tile.
| 5. | fixed
Type a keyword for how you want the background attachedhow it should be treated when the page scrollsfollowed by a space. Use one of the following options (Table 5.6):
| 6. | right top;
Type two values, separated by a space, to specify where you want the background positioned in relation to the top-left corner of the element. Use one of the following values (Table 5.7):
A length value, such as -10px. The values can be positive or negative. The first number tells the browser the distance the element should appear from the left edge of its parent; the second value specifies the position from the top edge of the parent. A percentage value, such as 25%. The first percentage indicates the horizontal position proportional to the parent element's size; the second value indicates the vertical position proportional to the parent element's size. A position keyword, such as top, bottom, left, right, or center.
|
 Tips
The ability to place graphics behind any element on the screen is a very powerful tool for designing Web pages; it frees you from the constraints of having to create new graphics whenever text changes. You can combine the versatility of HTML text with graphics to create stunning effects. The default state for an element's background is none, so the parent element's background image and/or color will show through unless the background color or background image for that particular child element is set. A fixed background can be particularly effective if you're using a graphic background in your layout to help define the layout grid.
|
xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Setting the Background</title> <style type="text/css" media="screen"><!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: black; 