Backgrounds
The background of this page is an excellent example of the power of style sheets. The style rule for the background of this page is:
body {
background-image:url(../graphics/pencils.jpg);
background-repeat: no-repeat;
background-color: white;
background-position: 100px 50px;
background-attachment: fixed;
} |
If you view source, you'll see 3 style sheets attached. The last one called "background.css" is specifically for this page.
This sets the background color to white, and also loads the image from the given URL for use as a background image. This is the general method of representing a URL within a style sheet. The same form, url("some URL"), is used whenever a resource such as an image is referred to within a style sheet. The three additional declarations control how the background image is displayed. The background-repeat: no-repeat; declaration causes the background image to be displayed only once rather than tiled to fill the entire browser window. The background image is positioned 100px from the left, and 50px from the top in the browser window with background-position: 100px 50px;, although Netscape 4 does not honor this, and displays the image in the upper left corner. The last modification of the background is done with background-attachment: fixed;, which fixes the background in place so that it does not scroll with the rest of the window's content. Regrettably, Netscape 4 ignores this as well, and scrolls the background off the top of the screen.
|
