Section 8.2. Background Images | Dreamweaver CS3: The Missing Manual

8.2. Background Images

The background-image property is the key to making visually stunning Web sites. Learn how to use it and its cousin properties, and you can make your site stand head and shoulders above the rest. For an example of the power of background images, check out www.csszengarden.com (Figure 8-1). The HTML for both the pages shown here is exactly the same; the visual differences are accomplished by using different background images. How's that for CSS power?

If you've built a few Web sites, you've probably used an image for the background of a pageperhaps a small graphic that repeats in the background of the browser window creating a (hopefully) subtle pattern. That time-honored HTML method used the <body> tag's background attribute. But CSS does the same job better.

Note: In the next few pages, you'll meet three background image properties by learning the individual CSS code for each one. Later in the chapter you'll learn a shorthand method that'll save you a lot of typing.

Figure 8-1. CSSzengarden.com showcases the power of Cascading Style Sheets by demonstrating how you can transform a single HTML file into two utterly different looking pages with the help of CSS. The real secret to making each of the wonderful designs look unique is the extensive use of background images. (In fact, when you look at these pages' HTML code, you'll see there isn't a single <img> tag in it.)

The background-image property adds a graphic to the background of an element. To put an image in the background of a Web page, you can create a style for the <body> tag:

 body {   background-image: url(/books/2/835/1/html/2/images/bg.gif); }

The property takes one value: the keyword url , followed by a path to the graphic file enclosed in parentheses. You can use an absolute URL like this url (http://www.cosmofarmer.com/image/bg.gif)or a document-or root-relative path like these:

 url(../  images/bg.gif) /* document-relative */ url(/books/2/835/1/html/2/images/bg.gif) /* root-relative */

As explained in the box in Section 8.3, document-relative paths provide directions in relation to the style sheet file, not the HTML page you're styling. These will be one and the same, of course, if you're using an internal style sheet, but you need to keep this point in mind if you're using an external style sheet. Say you've got a folder named styles (containing the site's style sheets) and a folder named images (holding the site's images). Both these folders are located in the site's main folder along with the home page (Figure 8-2). When a visitor views the home page, the external style sheet's also loaded (step 1 in Figure 8-2). Now, say the external style sheet includes a style for the <body> tag with the background image property set to use the graphic file bg.gif in the images folder. The document-relative path would lead from the style sheet to the graphic (step 2 in Figure 8-2). In other words, the style would look like this:

 body {   background-image: url(/books/2/835/1/html/2/images/bg.gif);

This path breaks down like this: ../ means "go up one level" (that is, up to the folder containing the styles folder); images/ means "go to the images folder"; and bg.gif specifies that file.

Figure 8-2. Document-relative paths are calculated in relation to the style sheet, not the Web page being styled.

In the examples so far, the path isn't enclosed in quotes as in HTML but quotes are fine, too. In CSS, all three of the following code lines are kosher:

 background-image: url(/books/2/835/1/html/2/images/bg.gif); background-image: url(/books/2/835/1/html/2/images/bg.gif); background-image: url(/books/2/835/1/html/2/images/bg.gif);

Note: Internet Explorer 5 for Mac doesn't recognize URLs that are specified inside of single quotes like this: url(/books/2/835/1/html/2/ images/bg.gif) .

UP TO SPEED
URL Types

In CSS, you need to specify an URL when you add a background image or attach an external style sheet using the @import method (Section 2.4.2). An URL or Uniform Resource Locator is a path to a file located on the Web. There are three types of paths: absolute path, root-relative path , and document-relative path . All three simply indicate where a Web browser can find a particular file (like another Web page, a graphic, or an external style sheet).

An absolute path is like a postal addressit contains all the information needed for a Web browser located anywhere in the world to find the file. An absolute path includes http://, the hostname, and the folder and name of the file. For example: http://www.cosmofarmer.com/images/bluegrass.jpg.

A root-relative path indicates where a file's located relative to a site's top-level folderthe site's root folder. A root-relative path doesn't include http:// or the domain name. It begins with a / (slash) indicating the root folder of the site (the folder the home page is in). For example /images/bluegrass.jpg indicates that the file bluegrass.jpg is located inside a folder named images , which is itself located in the site's top-level folder. An easy way to create a root-relative path is to take an absolute path and strip off the http:// and the host name.

A document-relative path specifies the path from the current document to the file. When it comes to a style sheet, this means the path from the style sheet to the specified file , not the path from the current Web page to the file.

Here are some tips on which type to use:

If you're pointing to a file that's not on the same server as the style sheet, you must use an absolute path. It's the only type that can point to another Web site.
Root-relative paths are good for images stored on your own site. Since they always start at the root folder, you can move the style sheet around without affecting the path from the root to the image on the site. However, they're difficult to use when first building your designs: you can't preview root-relative paths unless you're viewing your Web pages through a Web servereither your Web server out on the Internet, or a Web server you've set up on your own computer for testing purposes. In other words, if you're just opening a Web page off your computer using the browser's File Open command, then you wont see any images placed using root-relative paths.
Document-relative paths are the best when you're designing on your own computer without the aid of a Web server. You can create your CSS files and then review them in a Web browser simply by opening a Web page stored on your hard drive. These pages will work fine when you move them to your actual, living, breathing Web site on the Internet, but you'll have to re-write the URLs to the images if you move the style sheet to another location on the server.