Section 8.7. Tutorial: Using Background Images

8.7. Tutorial: Using Background Images

The CSS background-image property is the secret weapon of modern Web design. It can turn a ho-hum text-heavy Web page into a dazzling swirl of imagery. Since you can use it to add an image to the background of any HTML tag, the designs you can create are limited only by your imagination . The drop shadow example in the previous tutorial is just one example of creative background image use. Other common background image frills include applying a page background and adding custom bullets to unordered lists. You'll explore some of these common tasks in this tutorial.

8.7.1. Adding an Image to the Page Background

Whether it's an intricate pattern, a logo, or a full-screen photograph, images appear in the background of many a Web page. In fact, adding an image to the background of a page is probably the most common application of the back-ground-image property.

In your text editor, open the file chapter_08 bg_ex sidebar.html .

This page is similar to the one you created in the last chapter's tutorial. It has a floated sidebar and uses background colors to highlight portions of the page (Figure 8-14, top).

Figure 8-14. Using background images, you can make an already well-organized page (top) look much spiffier (bottom). Since you can add images to the background of any tag on a page, the possible placement of graphics on a page are nearly limitless.

To start, you'll add a <div> tag to create a container for the page's content. For a change of pace from the previous exercises, where the content on the page always fit the browser window's width, you'll create a design that's a set width and is centered in the middle of the browser window.
Locate the opening <body> tag and, directly below it, add the following tag :
```
 <body>  <div id="wrapper">  
```
This opening <div> tag marks the beginning of the container. You need to add a closing </div> tag next .
Near the bottom of the file, locate the closing </body> tag. Add this </div> tag directly above it :
```
  </div>  </body> 
```
You've wrapped all of the page's content in a single container. Now you'll add a style defining a width for the container and centering it in the browser window. This file already has an internal style sheet that provides some basic formatting. You'll add this new style to that style sheet.
Insert the following style between the body and h1 tag styles :
```
 #wrapper {     width: 760px;     margin: 15px auto 0 auto;     text-align: left; } 
```
This ID style defines how the <div> you just inserted should look. The 760pixel width means the entire width should fit inside monitors that have a resolution of at least 800x600 pixels (a safe bet for the vast majority of monitors out there today). The margin property uses the keyword auto for both the left and right margins, which tells a Web browser to split the difference between either side of the container, effectively centering the container inside the browser window. So, if the browser window of the visitor viewing this page is 900 pixels wide, then there'll be 70 pixels of space on both the left and right sides (900-760=140; 140 divided by the two sides equals 70 pixels on either side).

The last style declaration text-align: left simply aligns all text to the left edge. Left-alignment is how text usually appears, but in this case, you're using the declaration to help solve a problem in IE 5 for Windows. (More on that in step 6.)

First, you'll add an image to the page's background.
Locate the body tag style. (It's the first one in the internal style sheet.) Add the following three lines of CSS to it :
```
 background-image: url(  images/page_bg.jpg); background-repeat: repeat-x; background-position: left top; 
```
The first line of code points to the image page_bg.jpg you want to display on the page. This graphic's a gradient that starts as a vibrant green at the top and fades to white at the bottom. The graphic isn't as tall as the page content, so without further instructions, it would tile over and over across and down the page. At a certain point down the page, that vibrant green would reappear and fade once again downward to white. To prevent this unsightly snafu, you've set the background-repeat property so that the image tiles from left to right in order to fit any width of browser window, but doesn't tile down the page. The last line positions the image to start at the top left edge of the page.

Note: Using background property shorthand (Section 8.5), you can condense the three lines of code from step 5 (and the background- color property already defined in the body style) into a single line of CSS: background: white url(/books/2/835/1/html/2/images/page_bg.jpg) left top repeat-x .

Finally, complete this style by fixing an IE 5 for Windows bug. That browser doesn't understand the auto margins you set in step 4, so it won't center the container <div>. You need to add one more property to the style for IE 5's benefit.
Edit the body style by adding the text-align CSS property. The completed style should look like this :
```
 body {     font-family: Tahoma, "Lucida Grande", Arial, sans-serif;     font-size: 62.5%;     margin: 0;     padding: 0;     background-color: white;     background-image: url(/books/2/835/1/html/2/images/page_bg.jpg);     background-repeat: repeat-x;     background-position: center top;  text-align: center;  } 
```
Note: Centering the text on the page using the text-align property forces Internet Explorer 5 to center the container <div>. (IE 6 and 7 don't need this extra help since those browsers understand the auto value used for the left and right margins in step 4.) However, all of the text inside the <div> is aligned in the center as well. Fortunately, you fixed that problem in step 4 when you set the text-align to left , restoring normal alignment to the text inside the <div>.
Save the file and preview it in a Web browser .

The background graphic's bright green gradient drips down the page. Unfortunately, the graphic is also in the text's background, making some parts difficult to read. You'll take care of that by adding a background color and graphic to the <div> tag.
Return to your text editor and the sidebar.html file. Edit the # wrapper style like so :
```
 #wrapper {     width: 760px;     margin: 15px auto 0 auto;  background: #FFF url(  images/wrapper_bg.gif) center top no-repeat;  text-align: left; } 
```
This background property shorthand sets the background of the <div> to white, adds an image named wrapper_bg.gif to the background, centers that graphic at the top of the <div>, and sets it to display only once (no repeating).

If you preview the page now, you'll see the area where the text sits is white. You'll also notice reddish lines on either side of the <div> that fade at the bottom. The effect's subtle, but noticeable (Figure 8-15).

Figure 8-15. CSS lets you combine a background color and a background image, which comes in really handy in this example. The main text area has a white background color that helps separate the text from the fading gradation in the page's background. In addition, a simple graphic of two fading lines on either side of the text adds a subtle detail to the design.

8.7.2. Replacing Borders with Graphics

The border property (Section 7.3) is a useful tool in your design arsenal, but the limited number of border styles CSS offers can get boring. A hand-drawn line with the texture of charcoal on rough paper would catch your visitors ' attention better than a plain, straight one. You can skip the border property and add any kind of line you want as a background imageeasy as pie. In this tutorial, you'll replace the underline below each <h2> tag with a custom graphic that looks like a hand-drawn line.

Return to your text editor and the sidebar.html file. Locate the h2 tag style, remove the border-bottom property, and then add two background properties, so that the style looks like this :
```
 h2 {     font-size: 1.8em;     color: #7BA505;     margin: 10px 5px 0 25px;     overflow: hidden;  background-image: url(  images/underline.gif);     background-repeat: repeat-x;  } 
```
The background-image property specifies which graphic to use in the background of every <h2> tag on the page, while the repeat-x value makes sure that the graphic online tiles horizontally. In other words, no matter how long the <h2> tag is, the graphic repeats, giving the illusion of one solid line.

If you preview the file now, you'll see that the underline doesn't exactly line up. In fact, it isn't under at all. It's above the headlines!
Add the following style declaration to the h2 style below the background-repeat property :
```
 background-position: left bottom; 
```
You've changed the graphic's starting location so it appears at the left edge and bottom of the <h2> tags. If you preview the page now, though, you may not notice much improvement. The underline runs into the headline text.

But there's an easy fix. Since the bottom value used here puts the graphic at the bottom of the block created by the <h2> tag, you need only to increase the overall height of the block to move the line down a bit. You'll do this with a little bottom padding .
Edit the h2 style one last time, so that it looks like this :
```
 h2 {     font-size: 1.8em;     color: #7BA505;     margin: 10px 5px 0 25px;     overflow: hidden;       background-image: url(  images/underline.gif);     background-repeat: repeat-x;     background-position: left bottom;  padding-bottom: 7px;  } 
```
Padding, as you'll recall from Section 7.2, is the space between the border and the content. It also increases the overall height of the boxin this case by adding seven pixels of bottom padding. Now, the line graphic is placed at the bottom of the h2 block, but in the empty space created by the bottom padding.
Save the file and preview the page in a Web browser .

Each <h2> tag has the hand-drawn underline. Next you'll tackle the sidebar box, making it look a little less boxy and jazzing up the bulleted lists.

8.7.3. Using Graphics for Bulleted Lists

The average bullet used for unordered lists is a black dotnot very inspiring . But you can use the background-image property to replace those drab bullets with any image you want. The first step's to hide the bullets that normally appear beside list items.

Return to your text editor and the sidebar.html page. Locate the .sidebar li style near the end of the internal style sheet .

This descendent selector targets any <li> tag that appears inside another tag with a class of sidebar .
Replace the two CSS properties in the .sidebar li style with list-style: none ; the style should now look like this :
```
 .sidebar li {     list-style: none; } 
```
This removes the bullet. Now add the graphic.

Note: You can just as well apply list-style: none ; to a style affecting the <ul> or <ol> tags to remove bullets from each list item.
Add the following two properties to the .sidebar li style :
```
 background-image: url(/books/2/835/1/html/2/images/flower_bullet.gif); background-repeat: no-repeat; 
```
You've seen these two properties before. They add an image to the background and turn off repeating so that the graphic appears only once.

If you preview the page, you'll see that the bullets currently overlap the list text and the list items are a little jammed together (Figure 8-16, left). A little padding and margin will fix this.
Add two more properties to the .sidebar li style :
```
 padding-left: 18px; margin-bottom: 6px; 
```
The left padding adds empty space, effectively moving the text out of the way in order to display the new bullet icon. The bottom margin adds just a bit of breathing room between each list item (Figure 8-16, middle).

There's just one final flaw. The bullet image is a tad too high on the line, causing the tip of the icon to stick out too far above the text. But you can easily fix that with the background-position property.
Finish this style by adding background-position: 0px 2px ; The completed style should look like this :
```
 .sidebar li {     list-style: none;     background-image: url(  images/flower_bullet.gif);     background-repeat: no-repeat;  background-position: 0px 2px;  padding-left: 18px;     margin-bottom: 6px; } 
```
This last style declaration positions the bullet icon to the far left, two pixels from the top of the list item. It moves the icon down just a smidgen, enough to make the bullet look perfect.

Note: As discussed in Section 6.6, this kind of exact positioning is precisely why you should use the background property instead of the list-style-image property for adding graphic bullets to your lists.
Save the file and preview the page in your browser .

The list should now have fanciful flower icons instead of dreary black circles (Figure 8-16, right).

Figure 8-16. Replacing regular black bullets with your own graphics is easy. Just a few extra steps ensure the bullets and text are placed in the correct location.

8.7.4. Adding Rounded Corners to the Sidebar

At this point, the sidebar, like much of the page, is rather boxy. To add visual variety, soften the sidebar's appearance with some rounded corners.

In a nutshell , you'll first add a background image with rounded corners to the bottom of the sidebar. Then, for the rounded corners at the top of the box, you'll add a background image to the first tag in the sidebar (the <h3> tag).

Return to your text editor and the sidebar.html file that you've been working on .

The graphic you'll place in the bottom of the sidebar has a decorative photo and two rounded lower corners.
Locate the .sidebar style in the file's internal style sheet. Replace the background-color declaration background-color: #CBF622 ;with this :
```
 background: #CBF622 url(  images/bg_bottom.gif) center bottom no-repeat; 
```
This shorthand property includes the same background color you just replaced plus instructions for adding a graphic to the center and bottom of the sidebar.

Preview the page now, and you'll see the graphic, but a few things aren't quite right, as shown at left in Figure 8-17. There's space on both the left and right side of the image, so it doesn't look like it's actually the bottom of the sidebarit just looks like a photo inside the sidebar. Also, you can't read all of the text since some of it overlaps the image. Finally, the border around the sidebar appears outside of the graphic, making the sidebar appear to still have a square bottom. You'll tackle these problems one by one.
In the .sidebar style, remove the following property declaration: padding: 10px ;

The graphic is 220 pixels wide, and the width of the sidebar is also set to 220 pixels. However, the 10 pixels of padding adds 10 pixels of space around the sidebar, and 20 pixels (left and right) to the overall width of the sidebar. Removing the padding property makes the sidebar shrink down to the width of the graphic.

Note: The rounded corners technique used here is for a fixed-width box. That means if you change the width of the sidebar, you'll need to recreate the graphics at the same width to match. For a few techniques that let you create rounded corners with more flexibilityand require more CSS and HTML codevisit these pages:

To add some room at the bottom of the sidebar, so that the picture doesn't interfere with the text, turn to the padding-bottom property.
Add the style declaration padding-bottom: 75px ; to the .sidebar style .

Padding is the space between the borders of an element and the content. By adding 75 pixels of bottom padding, you ensure that there's plenty of room for the background image, so that text can never overlap it.

There's one final problem to fix: The border around the sidebar appears around the background graphic (Figure 8-17, middle). Simply removing the border does the trick.

Figure 8-17. It takes a few steps to place the image and tweak the display of the sidebar to achieve convincing rounded bottom corners.

Remove the border property from .sidebar , so that the final version of the style looks like this :

 .sidebar {     width: 220px;     float: right;     margin: 10px;     background: #CBF622 url(  images/bg_bottom.gif) center bottom no-repeat;     padding-bottom: 75px; }

Save the file and preview it in a Web browser .

The sidebar should look like Figure 8-17, right. Notice that even though you eliminated the border, there's still a borderline around the bottom, curved corners, and sides of the base of the sidebar. That line isn't created with CSS; it's just a line drawn directly on the graphic. You'll next insert a graphic to make the top of the sidebar box rounded as well.

It would be really cool if you could add a background image to the top of the sidebar and a different background image to the bottom of the sidebar. This way you'd have rounded corners on both the top and bottom, but the sidebar itself could expand to fit whatever content was added to it.

Unfortunately, CSS 2.1 lets you add only one background image per style, so you must find something else to "hook" the second background image on, like a tag somewhere in the sidebar. In this case, since the image adds rounded corners to the top of the sidebar box, you can apply the style to the first tag inside the sidebar. You'll use a descendent selector to do that.

Note: Future versions of CSS will allow multiple background images for a single style. So far, only one browserSafarirecognizes them.
Locate the .sidebar h3 style in the external style sheet. (It's directly below the .sidebar style you just modified.) Then add the following line of code to the style :
```
 background: url(/books/2/835/1/html/2/images/top_bg.gif) center top no-repeat; 
```
By now, this kind of shortcut style should look familiar. It adds a graphic to the top and center of the style. In this case, it'll appear in the background of the <h3> tag inside the sidebar. At this point, the rounded corners are in place, and the box is, well, a little less boxy. You'll just add a few final touches to the headline by making the text white so it stands out from the newly added graphic and adding a little padding above and below the headline so it isn't so cramped.
Add two additional properties to the .sidebar h3 style so that it looks like this :
```
 .sidebar h3 {     font-size: 1.4em;     margin: 0;     text-align: center;     text-transform: uppercase;     background: url(/books/2/835/1/html/2/images/top_bg.gif) center top no-repeat;  color: #FFF;     padding: 5px;  } 
```
If you preview the page now, the sidebar looks finished almost. Look closely at the left and right edges and you'll notice that while there's an outline around the bottom graphic, that line doesn't appear on either side of the sidebar where the bulleted list appears (Figure 8-18, left).

One solution would be to simply make the bottom graphic a solid background color without an outline, but that wouldn't be much fun. Instead, you'll add left and right borders to the bulleted list. The lines from the border overlap the outline on the graphic, giving the appearance of one unified line running around the entire sidebar.
Find the .sidebar ul style. Then add two border declarations so the final style looks like this :
```
 .sidebar ul {     color: #666;     font-size: 1.2em;     margin: 0;       padding: 10px 5px 0 5px;  border-left: 1px solid #E73A10;     border-right: 1px solid #E73A10;  } 
```
Now the unordered list has two borders on either side. Because there's no padding on the sidebar itself, those borders extend to the very edges, making them appear to actually be bordering the sidebar (Figure 8-18, right).
Save the file and preview the page in a Web browser .

The final page makes use of background images in ways that may not feel immediately like images at allto create the curved sidebar corners and complete its borders. Creative use of background images adds depth to your Web page designs, and makes your Web site look richer and more professional.

Figure 8-18. Although the graphic at the bottom of the sidebar has a line drawn around its edge, the unordered list doesn't (left). By adding borders to the list, it appears that one unified border is drawn around the curved sidebar (right.)

8.7.5. Creating an External Style Sheet

There's one final task to perform. It's one that you'll probably do time and time again in your CSS career. After you've finalized your design using an internal style sheet, it's time to take those styles and place them in an external style sheet for use by all of the pages of your site.

In your text editor, create a new file. Save it as styles.css in the same folder as the sidebar.html file .

This document is your external style sheet. You'll copy the styles you embedded in the sidebar.html file and paste them into this file.
Return to the sidebar.html file, and select all of the code between the opening <style> and closing </style> tags .

Don't select the style tags themselves . Those are HTML code, and an external style sheet must contain only CSS code.
Cut the code from the file by choosing Edit Cut .

You're removing the code from this page, since you'll link to the external style sheet in a moment.
Return to the empty styles.css file, and paste the code by choosing Edit Paste. Save the file .

Now all of the CSS code is in its own file. You can link any page in your site to this file and your pages can share the same formatting instructions.

Now you just need to attach the style sheet to the HTML page.
Return to the sidebar.html file. Make sure the <style> tags are still in place, and then add one line of code between these tags :
```
 <style type="text/css">  @import url(styles.css);  </style> 
```
Note: The other way to attach an external style sheet is with a link tag (Section 2.4.2). To use this tag, first remove the opening and closing <style> tags from the Web page, and then add <link rel="stylesheet" type="text/css" href="styles.css"/>
Save both files and preview the sidebar.html file in a Web browser .

The page should look the same as before you completed these last six steps (right image in Figure 8-14). The only difference is behind the scenes: Instead of a single file you now have two files: one for the CSS and another for the HTML. (You can find a completed version in the chapter_08_finished bg_ex folder.)

Note: If the page doesn't look right, then make sure you saved the styles.css file in the same folder as the sidebar.html file. If you didn't, you'll need to modify the url(styles.css) in step 5 above to reflect the correct path to the style sheet. If you stored styles.css in a folder named styles that's inside the bg_ex folder, for example, then you'd change it to url(styles/styles.css) .