Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:19:54 PM

3.4. URLs

If you've written web pages, then you're familiar with URLs. URLs aren't often used in style sheets, but if you do need to refer to one -- as in the @import statement, which is used when importing an external style sheet -- then the general format is:


This example defines an absolute URL. By absolute, we mean a URL that will work no matter what page it's found in, because it defines an absolute location in web space. Let's say that we have a server called On that server, there is a directory called pix, and in this directory is an image waffle22.gif. In this case, the absolute URL of that image would be This URL is valid no matter where it is found, whether the page is on the server or

The other type of URL is a relative URL, so named because this type of URL specifies a location that is relative to the document that uses it. If you're referring to a relative location, such as a file in the same directory as your web page, then the general format is:


This only works if the image is on the same server as the page that contains the URL. For argument's sake, we'll assume that we have a web page located at and that we want the image waffle.gif to appear on this page. In that case, the relative URL could be pix/waffle22.gif.

This works because the web browser knows that it should take the same place it found the web document and add the relative URL to it. In this case, the server name added to the pathname pix/waffles22.gif equals

Here are two more examples:

@import url(;
BODY {background-image: url(hatch.gif);}

It doesn't really matter whether you use absolute or relative URLs, so long as they define valid locations. You can use whichever is easier for you and your project.

Another thing you need to watch out for is that relative URLs are relative to the style sheet, not the HTML document. For example, you may have an external style sheet that imports another style sheet. If you use a relative URL to import the second style sheet, then it has to be relative to the first style sheet. As an example, consider an HTML document at, which has a LINK to the style sheet

<LINK REL="stylesheet" TYPE="text/css"

Inside the file basic.css is an @import statement referring to another style sheet:

style sheets. These are marked with aREL of alternatestylesheet and come into play only ifthey're selected by the reader. Alternate style sheets

Unfortunately, as of this writing, browsers don't make it veryeasy to select alternate style sheets, assuming that they can do so

@import url(special/toppings.css);

This @import will load the file, not If you have a style sheet at the latter location, then the @import in basic.css should read:

@import url(;

In other words, use an absolute URL.

This might be a good idea in any case. As it happens, Navigator 4 interprets relative URLs in relation to the HTML document, not the style sheet. Yes, this is wrong, but that's how Navigator 4 does things. Therefore, it's generally easiest if you make all of your URLs absolute, since Navigator does at least handle those correctly.

Note that there cannot be a space between the url and the opening parenthesis. Thus:

BODY {background: url(http://www.pix.web/picture1.jpg);}      /* correct */
BODY {background: url (images/picture2.jpg);}                 /* INCORRECT */

If the space is included, the entire rule will be invalidated, and therefore ignored.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

In a web browser, though, the viewing area can change as the user resizes the browser's window. This will cause the background's origin image to shift as the window changes size. Figure 6-56 depicts several views of the same document. So in a certain sense the image isn't fixed in place, but it will remain fixed so long as the viewing area isn't resized.

Figure 6-56

Figure 6-56. Centering still holds, even if the image is "fixed"

There is only one other value for