| Beyond simply setting a background-image that tiles behind an element, CSS offers you great flexibility in the exact placement of the background behind the element using several different properties: Repeat. Whether the image tiles, only appears once, or repeats only horizontally or vertically. Attachment. Whether the image scrolls with the rest of the page or stays in one place. Position. Moves the image to the left and down (positive values) or to the right and up (negative values) from the top-left corner of the parent element.
In this example, a background image of a stretched Alice (Figure 5.4 and 5.5) is fixed to the top-left corner (Figure 5.6). In addition, the level 2 heading is given an extra flourish (Figure 5.7) with a background that repeats across the top and a background for form buttons (Figure 5.8) that creates a glossy plastic effect. Figure 5.4. The background image (Alice) appears on the left side of the screen, and the text has been pushed over to the right. 
Figure 5.5. The actual image used in the background is relatively small, since we use the background color (white) to fill in the background behind the rest of the page. 
Figure 5.6. Although the text has scrolled, the background image for the page (the telescoping Alice) stays in the same place. 
Figure 5.7. The level 2 heading also uses a flourish background image to add an attractive rule above the chapter title. 
Figure 5.8. The background image for form buttons. When repeated horizontally, it produces a glossy look. 
To define a background image: 1. | background-image: url(alice05.gif);
Type the background-image property name, followed by a colon (:), url(), and a URL in the parenthesis for the location of the image file (GIF, JPEG, or PNG) that you want to use as the background. It can be either a complete Web address or a local filename (Code 5.3).
Code 5.3. This code sets backgrounds for the page, level 2 headings, and the form fields. Alternatively, you can type none instead of url() and a path to instruct the browser not to use a background image (Table 5.4).
Table 5.4. Background-Image ValuesVALUE | COMPATIBILITY |
|---|
<url> | IE4, FF1, S1, O3.5, CSS1 | none | IE4, FF1, S1, O3.5, CSS1 |
| | | 2. | background-repeat: no-repeat;
Type the background-repeat property name, followed by a colon (:), and then define how you want your background to repeat by typing one of the following options (Table 5.5):
repeat instructs the browser to tile the graphic throughout the background of the element horizontally and vertically. This is the default value if the property is left out. repeat-x instructs the browser to tile the background graphic only horizontally, so 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, so 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.
Table 5.5. Background-Repeat ValuesVALUE | COMPATIBILITY |
|---|
repeat | IE4, FF1, S1, O3.5, CSS1 | repeat-x | IE4, FF1, S1, O3.5, CSS1 | repeat-y | IE4, FF1, S1, O3.5, CSS1 | no-repeat | IE4, FF1, S1, O3.5, CSS1 |
| 3. | background-attachment: fixed;
Type the background-attachment property name, followed by a colon (:), and then define how you want the background to be treated when the page scrolls by typing one of the following options (Table 5.6):
scroll instructs the background graphic to scroll with the element. This is the default value if the property is left out. fixed instructs the browser not to scroll the background content with the rest of the element. However, it will scroll with parent elements.
Table 5.6. Background-Attachment ValuesVALUE | COMPATIBILITY |
|---|
scroll | IE4, FF1, S1, O3.5, CSS1 | fixed | IE4, FF1, S1, O3.5, CSS1 |
| | | 4. | background-position: -10px 10px;
Type the background-position property name, followed by a colon (:). Then type two values (x and y) separated by a space, to indicate where you want the background to appear in relation to the top-left corner of the element. Use one of the following values (Table 5.7):
Length values, 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. See "Values and Units Used in this Book" in the Introduction for more details. Percentage values, 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. Keywords in plain English: top, bottom, left, right, or center.
Table 5.7. Background-Position ValuesVALUE | COMPATIBILITY |
|---|
<length> | IE4, FF1, S1, O3.5, CSS1 | <percentage> | IE4, FF1, S1, O3.5, CSS1 | top | IE4, FF1, S1, O3.5, CSS1 | bottom | IE4, FF1, S1, O3.5, CSS1 | left | IE4, FF1, S1, O3.5, CSS1 | right | IE4, FF1, S1, O3.5, CSS1 | center | IE4, FF1, S1, O3.5, CSS1 |
|
 Tips
A repeating background can sometimes be really annoying. It may repeat where it's not wanted, or you may want it to tile in only one direction. CSS gives you supreme control of how background graphics appear through the background-repeat property. You can mix percentage and length values in the same background-position declaration, but you cannot mix length or percentages with plain-English keywords. Any background space that does not have a background graphic will be filled with the background color, so I recommend always specifying a background color with a background image. Background images can be a deceptively powerful tool for Web design, two of the most useful of which are CSS Sprites, discussed in Chapter 20.
|
/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 a Background Image</title> <style type="text/css" media="screen"><!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: black; 