Background Image Relative URLs and Shortcut notation.

This example covers some final details related to background Images.

First, you have seen the notation for specifying URLs for background images throughout this lesson.

  background-image: url("path/to/image.png"); 

The examples in this lesson have all used Relative URLs to locate the desired background image relative to the Web page.

When the URL is in an External Style Sheet, it locates the graphic relative to the External Style Sheet, not the page using the graphic.

If you stop and think about it, it has to be that way. An external style sheet can be pulled into multiple pages in different folders. So the URL pointing to a graphic must be relative to the unique location of the style sheet, because the locations of the pages using the style sheet might be different.


Second, you have seen several different CSS properties used for background images in this lesson.
CSS does provide a shortcut notation that you might see from time to time, so you need to be aware of it.
Unlike other shortcut notations you have seen (margins,padding,borders), I don't recommend using this one because it's much better for beginning students to understand the individual properties that control placement of background images. See the source code for more information.