Part III: CSS for Presentation 246 Background Images Background Images CSS really beats (X)HTML hands-down when it comes to background imag- es (but then, (X)HTML really shouldn’t have been dealing in background images in the first place). With CSS, you’re not stuck with a repeating tile pat- tern, and you can position a background image wherever you like. You can also apply a background image to any element in the document, not just the whole page. In this section, we’ll look at the collection of properties used to place and push around background images, starting with the basic background-image property. Adding a background image The background-image property is used to add a background image to an ele- ment. Its primary job is to provide the location of the image file. background-image Values: URL (location of image) | none | inherit Default: none Applies to: all elements Inherits: no The value of background-image is a sort of url-holder that contains the URL of the image. The URL is relative to the (X)HTML document that the image is going into, not the style sheet document (see related Tip). These examples and Figure 13-14 show background images applied behind a whole page (body) and a single blockquote element with padding and a border applied. body { background-image: url(star.gif); } blockquote { background-image: url(dot.gif); padding: 2em; border: 4px dashed;} Here you can see the default behavior of background-image. The image starts in the top, left-hand corner and tiles horizontally and vertically until the entire element is filled (although you’ll learn how to change that in a moment). Like background colors, tiling background images fill the area behind the content area, the extra padding space around the content, and extend to the outer edge of the border (if there is one). If you provide both a background-color and a background-image to an ele- ment, the image will be placed on top of the color. In fact, it is recommended that you do provide a backup color that is similar in hue, in the event the image fails to download. The properties related to background images are: background-image background-repeat background-position background-attachment background A t A G l A n c e The properties related to background images are: background-image background-repeat background-position background-attachment background A t A G l A n c e N ot e The proper term for that “url-holder” is a functional notation. It is the same syntax used to list decimal and percent- age RGB values. N ot e The proper term for that “url-holder” is a functional notation. It is the same syntax used to list decimal and percent- age RGB values. Providing site root relative URLs for images ensures that the background image can be found regardless of location of the (X)HTML document it’s going into. The root directory is indicated by a slash at the beginning of the URL. For example: background-image: url(/images/background.jpg) t I P Providing site root relative URLs for images ensures that the background image can be found regardless of location of the (X)HTML document it’s going into. The root directory is indicated by a slash at the beginning of the URL. For example: background-image: url(/images/background.jpg) t I P Background Images Chapter 13, Colors and Backgrounds 247 dot.gif (24 x 24 pixels) star.gif (100 x 96 pixels) Figure 13-14. Examples of tiling background images added with the background-image property. Figure 13-15. The article with a simple tiling background image. exercise 13-2 | Working with background images In this exercise, we’re going to add and manipulate tiling background images in the Cabbages article from the last exercise. We’ll revisit this document several times to give you a chance to try out each background image property. The images provided for this exercise should be in the same directory as the cabbage.html document. Add a declaration to the body style rule that makes the image cabbage_A.jpg tile in the background of the page. background-image: url(cabbage_ A.jpg) Easy, isn’t it? When you save and view the page in the browser, it should look like Figure 13-15. For extra credit, take the image out of the page background and put it in the div at the top of the page. Background Images When working with background images, keep these guidelines and tips in mind: Use a simple image that won’t interfere with the legibility of the text over it. Always provide a background- color value that matches the primary color of the background image. If the background image fails to display, at least the overall design of the page will be similar. This is particularly important if the text color would be illegible against the browser’s default white background. As usual for the Web, keep the file size of background images as small as possible. D e S I G n t I P Part III: CSS for Presentation 248 Background Images Background Tiling As we saw in the last figure, images tile up and down, left and right when left to their own devices. You can change this behavior with the background- repeat property. background-repeat Values: repeat | repeat-x | repeat-y | no-repeat | inherit Default: repeat Applies to: all elements Inherits: no If you want a background image to appear just once, use the no-repeat key- word value, like this. body { background-image: url(star.gif); background-repeat: no-repeat; } You can also restrict the image to tiling only horizontally (repeat-x) or verti- cally (repeat-y) as shown in these examples. body { background-image: url(star.gif); background-repeat: repeat-x; } body { background-image: url(star.gif); background-repeat: repeat-y; } Figure 13-16 shows examples of each of the keyword values. Notice that in all the examples, the tiling begins in the top-left corner of the element (or browser window when an image is applied to the body element). But the background image doesn’t necessarily need to start there. exercise 13-2 | (continued) Now let’s try some slightly more sophisticated tiling on the sample article page. This time, we’ll remove that busy tile in the background of the whole page and add a more subtle pattern just within the “titlepage” div . Remove the background-image declaration in the body or div style rules. In the div#titlepage rule, add the image cabbage_B.gif and set it to repeat horizontally only. div#titlepage { padding: 1em; background-color: #D4F8B9; background-image: url(cabbage_B.gif); background-repeat: repeat-x; } Save the file and look at it in the browser. It should look like Figure 13-17. Try changing it to repeat vertically, then make it not repeat at all. 1. 2. 3. exercise 13-2 | (continued) Now let’s try some slightly more sophisticated tiling on the sample article page. This time, we’ll remove that busy tile in the background of the whole page and add a more subtle pattern just within the “titlepage” div . Remove the background-image declaration in the body or div style rules. In the div#titlepage rule, add the image cabbage_B.gif and set it to repeat horizontally only. div#titlepage { padding: 1em; background-color: #D4F8B9; background-image: url(cabbage_B.gif); background-repeat: repeat-x; } Save the file and look at it in the browser. It should look like Figure 13-17. Try changing it to repeat vertically, then make it not repeat at all. 1. 2. 3. Background Images Chapter 13, Colors and Backgrounds 249 No repeat Repeat-y Repeat-x Figure 13-16. Turning off automatic tiling with no-repeat (top), vertical-axis tiling with repeat-y (middle), and horizontal-axis tiling with repeat-x (bottom). Figure 13-17. Adding a horizontal tiling image to the div. Background Position The background-position property specifies the position of the origin image in the background. You can think of the origin image as the first image that is placed in the background from which tiling images extend. Here is the property and its various values. Part III: CSS for Presentation 250 Background Images background-position Values: length measurement | percentage | left | center | right | top | bottom | inherit Default: 0% 0% (same as left top ) Applies to: all elements Inherits: no In general, you provide both horizontal and vertical values that describe where to place the origin image, but there are a variety of ways to do it. Examples of each method are shown in Figure 13-18. Keyword positioning The keyword values (left, center, right, top, bottom, and center) position the origin image relative to the edges of the element. For example, left posi- tions the image all the way to the left edge of the background area. Keywords are typically used in pairs, as in these examples: { background-position: left bottom; } { background-position: right center; } If you provide only one keyword, the missing keyword is assumed to be center. Thus, background-position: right has the same effect as the sec- ond example above. Length measurements You can also specify the position by its distance from the top-left corner of the element using pixel measurements. When providing length values, the horizontal measurement always goes first. { background-position: 200px 50px; } Percentages Percentage values are provided in horizontal/vertical pairs, with 0% 0% corresponding to the top-left corner and 100% 100% corresponding to the bottom-right corner. It is important to note that the percentage value applies to both the canvas area and the image itself. For example, the 100% value places the bottom-right corner of the image in the bottom-right cor- ner of the canvas. As with keywords, if you only provide one percentage, the other is assumed to be 50% (centered). { background-position: 15% 100%; } Figure 13-18 shows the results of each of the background-position examples listed above with the background-repeat set to no-repeat for clarity. It is pos- sible to position the origin image and let it tile from there, in both directions or just horizontally or vertically. When the image tiles, the position of the initial image won’t be obvious, but you can use background-position to make a tile pattern start at a point other than the left edge of the image. To ensure best performance in modern browsers, always supply the horizontal measurement first for all value types. c S S t I P To ensure best performance in modern browsers, always supply the horizontal measurement first for all value types. c S S t I P background-position: 15% 100%; background-position: top left; background-position: right center; background-position: 5opx 50px Figure 13-18. Positioning a non- repeating background image background-position: 15% 100%; background-position: top left; background-position: right center; background-position: 5opx 50px Figure 13-18. Positioning a non- repeating background image Background Images Chapter 13, Colors and Backgrounds 251 Put a non-repeating image in the top, left corner of the page. Use the image named cabbage_C_topleft.gif . I’ll give you the rule for this first one. Then try putting cabbage_C_ topright.gif in the top, right corner. body { margin-left: 10%; margin-right: 10%; background-color: #BBE09F; background-image: url(cabbage_C_topleft.gif); background-repeat: no-repeat; background-position: left top; } Change the above rule to place the image cabbage_C_rightside.gif on the right edge of the page and 100 pixels down from the top (this is the screenshot shown in Figure 13-19). The CSS Recommendation allows combined value types (for example, background-position: right 100px ). Just make sure you always put the horizontal value first. Older browsers may have a problem with mixed values, so be sure to test this on your target browsers. You can try the same thing on the left side of the page using cabbage_C_leftside.gif . Experiment with different vertical values. Change that same rule to place the image cabbage_C.gif in the center of the body element. Note that it will be centered vertically in the height of the whole body element, not in the browser window, so you’ll have to scroll down to see it. Now let’s get fancy. Change the position of cabbage_C.gif to center 85px to center it near the top of the page. Now, add the same image to the shaded div at the top of the page, setting its position to center 75px . 1. 2. 3. 4. div#titlepage { padding: 1em; background-color: #D4F8B9; background-image: url(cabbage_C.gif); background-repeat: no-repeat; background-position: center 75px; } The images may not match up exactly, but with this image, it’s difficult to tell. Try scrolling the page, and pay attention to what happens to the background images. We’ll play with this concept more in the next installment of Exercise 13-2. exercise 13-2 | (continued) You guessed it we’re going to have fun with the position of the background image in the cabbage article (are you hungry for sauerkraut yet?). For this exercise, I’ve prepared several variations on the cabbage illustration that will look nice when tucked along various edges of the page (see Figure 13-19). All of these GIF images are transparent, so when you use them as background images, the background color will show through. I’ll give you a few things to try, but feel free to experiment with different placements and types of position values on your own. cabbage_C.gif cabbage_C_topleft.gif cabbage_C_topright.gif cabbage_C_leftside.gif cabbage_C_rightside.gif background-image: url (cabbage_C_rightside.gif); background-repeat: no-repeat; background-position: right 120px; Figure 13-19. The collection of background images designed to be positioned in various places in the document, as well as an example of the image cabbage_C_rightside.gif positioned on the right edge of the document. Part III: CSS for Presentation 252 Background Images N ot e Notice in Figure 13-18 that when an origin image is placed in the corner of an ele- ment, it is placed inside the border. Only repeated images extend under the border to its outer edge. Background attachment In the previous exercise, I asked you to scroll the page and watch what hap- pens to the background image. As expected, it scrolls along with the docu- ment and off the top of the browser window, which is its default behavior. However, you can use the background-attachment property to free the back- ground from the content and allow it to stay fixed in one position while the rest of the content scrolls. background-attachment Values: scroll | fixed | inherit Default: scroll Applies to: all elements Inherits: no With the background-attachment property, you have the choice of whether the background image scrolls or is fixed. When an image is fixed, it stays in the same position relative to the viewing area of the browser (as opposed to being relative to the element it fills). You’ll see what I mean in a minute. In the following example, a large, non-tiling image is placed in the background of the whole document (the body element). By default, when the document scrolls, the image scrolls too, moving up and off the page, as shown in Figure 13-20. However, if you set the value of background-attachment to fixed, it stays where it is initially placed, and the text scrolls up over it. body { background-image: url(images/bigstar.gif); background-repeat: no-repeat; background-position: center 300px; background-attachment: fixed; } You can fix the position of a background image for any element, not just body, but unfortunately, it won’t work for users with Internet Explorer 6 and earlier for Windows. Fixed background images in non-body elements is supported in the latest IE7 release, thankfully. Background Images Chapter 13, Colors and Backgrounds 253 background-attachment: fixed; When background-attachment is set to “fixed,” the image stays in its position relative to the browser viewing area and does not scroll with the content A large non-repeating background image in the body of the document. background-attachment: scroll; By default, the background image is attached to the body element and scrolls off the page when the page content scrolls. Figure 13-20. Preventing the background image from scrolling with the background- attachment property. exercise 13-2 | (continued) When we last left the cabbage article, we had applied the same background image to the body and div elements. We’ll leave it just like that, but we’ll use the background-attachment property to fix the image in the background of the page. body {margin-left: 10%; margin-right: 10%; background-color: #BBE09F; background-image: url(cabbage_C.gif); background-repeat: no-repeat; background-position: center 85px; background-attachment: fixed; } Save the document, open it in the browser, and now try scrolling. The background image stays put in the viewing area of the browser. Now for the pièce de résistance —make the background image in the div fixed as well. You can use the cabbage_C.gif image or change it to cabbage_D.gif , which is a little lighter. div#titlepage { padding: 1em; background-color: #D4F8B9; background-image: url(cabbage_D.gif); background-repeat: no-repeat; background-position: center 75px; background-attachment: fixed; } Save the file and reload it in the browser window. Now look at what happens when you scroll the page. Windows users, you’re going to need a browser other than Internet Explorer 6 (or earlier) to see the effect. (I recommend downloading the Firefox browser at www.mozilla.com/firefox/ .) Eric Meyer provides a more in-depth discussion of fixed background images at www.meyerweb.com/ eric/css/edge/complexspiral/glassy. html . R e A D m O R e Eric Meyer provides a more in-depth discussion of fixed background images at www.meyerweb.com/ eric/css/edge/complexspiral/glassy. html . R e A D m O R e Part III: CSS for Presentation 254 The Shorthand background Property The Shorthand background Property You can use the handy background property to specify all of your background styles in one declaration. background Values: background-color background-image background-repeat background-attachment background- position | inherit Default: see indiviual properties Applies to: all elements Inherits: no As for the shorthand font property, the value of the background property is a list of values that would be provided for the individual background proper- ties listed above. For example, this one background rule: body { background: black url(arlo.jpg) no-repeat right top fixed; } replaces this rule with five separate declarations: body { background-color: black; background-image: url(arlo.jpg); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } All of the property values for background are optional and may appear in any order. The only restriction is that when providing the coordinates for the background-position property, the horizontal value must appear first, imme- diately followed by the vertical value. Be aware that if a value is omitted, it will be reset to its default (see Watch Out for Overrides). Finally, External Style Sheets Back in Chapter 11, Cascading Style Sheets Orientation, I told you that there are three ways to connect style sheets to (X)HTML markup: inline with the style attribute, embedded with the style element, and as an external .css document linked to or imported into the document. In this section, we finally get to that third option. External style sheets are by far the most powerful way to use CSS, because you can make style changes across an entire site simply by editing a single style sheet document. That is the advantage to having all the style informa- tion in one place, and not mixed in with the document source. First, a little bit about the style sheet document itself. An external style sheet is a plain-text document with at least one style sheet rule. It may not include any (X)HTML tags (there’s no reason to, anyway). It may contain comments, but they must use the CSS comment syntax that you’ve seen already: /* This is the end of the section */ Watch Out for Overrides The background property is efficient, but use it carefully. Because it is a shorthand property, when you omit a value, that property will be reset with its default. Be careful that you do not accidentally override style rules earlier in the style sheet with a later shorthand rule that reverts your settings to the defaults. In this example, the background image dots.gif will not be applied to h3 elements because by omitting the value for background-image , it essentially set that value to none . h1, h2, h3 { background: red url(dots.gif) repeat-x;} h3 {background: green;} To override particular properties, use the specific background property you intend to change. For example, if the intent in the above example was to change just the background color of h3 elements, the background- color property would be a better choice. When using this or any shorthand property, pay attention to related rules earlier in the style sheet, or be sure that every property is specified. Watch Out for Overrides The background property is efficient, but use it carefully. Because it is a shorthand property, when you omit a value, that property will be reset with its default. Be careful that you do not accidentally override style rules earlier in the style sheet with a later shorthand rule that reverts your settings to the defaults. In this example, the background image dots.gif will not be applied to h3 elements because by omitting the value for background-image , it essentially set that value to none . h1, h2, h3 { background: red url(dots.gif) repeat-x;} h3 {background: green;} To override particular properties, use the specific background property you intend to change. For example, if the intent in the above example was to change just the background color of h3 elements, the background- color property would be a better choice. When using this or any shorthand property, pay attention to related rules earlier in the style sheet, or be sure that every property is specified. exercise 13-2 | (continued) This one is easy. Replace all of the background-related declarations in the body of the cabbage article with a single background property declaration. body { margin-left: 10%; margin-right: 10%; background: #BBE09F url(cabbage_C.gif) no-repeat center 85px fixed; } Do the same for the div element, and you’re done. exercise 13-2 | (continued) This one is easy. Replace all of the background-related declarations in the body of the cabbage article with a single background property declaration. body { margin-left: 10%; margin-right: 10%; background: #BBE09F url(cabbage_C.gif) no-repeat center 85px fixed; } Do the same for the div element, and you’re done. Finally, External Style Sheets Chapter 13, Colors and Backgrounds 255 The style sheet should be named with the .css suffix (there are some excep- tions to this rule, but you’re unlikely to encounter them as a beginner). Figure 13-21 shows how a short style sheet document looks in my text editor. Figure 13-21. External style sheets contain only CSS rules and comments in a plain text document. There are two ways to refer to an external style sheet from within the (X)HTML document: the link element and an @import rule. Let’s look at both of these attachment methods. Using the link Element The best-supported method is to create a link to the .css document using the link element in the head of the document, as shown here: <head> <link rel="stylesheet" href="/path/stylesheet.css" type="text/css" /> <title>Titles are required.</title> </head> You need to include three attributes in the link element: rel="stylesheet" Defines the linked document’s relation to the current document. The value of the rel attribute is always stylesheet when linking to a style sheet. href="url" Provides the location of the .css file. Design with Embedded Styles; Finish with an External Style Sheet It is common web development practice to use an embedded style sheet while you are designing the page because it keeps everything in one place, and your changes will show instantly when you reload the page in the browser. But once the design is all set, the style rules are then cut and pasted into an external .css document so they can be linked or imported to multiple documents on the site. P R O D U c t I O n t I P Design with Embedded Styles; Finish with an External Style Sheet It is common web development practice to use an embedded style sheet while you are designing the page because it keeps everything in one place, and your changes will show instantly when you reload the page in the browser. But once the design is all set, the style rules are then cut and pasted into an external .css document so they can be linked or imported to multiple documents on the site. P R O D U c t I O n t I P N ot e The link element is empty, so you need to terminate it with a trailing slash in XHTML documents, as shown in this example. Omit the trailing slash in HTML documents. N ot e The link element is empty, so you need to terminate it with a trailing slash in XHTML documents, as shown in this example. Omit the trailing slash in HTML documents. . location of the .css file. Design with Embedded Styles; Finish with an External Style Sheet It is common web development practice to use an embedded style sheet while you are designing the page. D U c t I O n t I P Design with Embedded Styles; Finish with an External Style Sheet It is common web development practice to use an embedded style sheet while you are designing the page. overall design of the page will be similar. This is particularly important if the text color would be illegible against the browser’s default white background. As usual for the Web, keep