|
There are some pretty kewel things to do with backgrounds with CSS. Check out our stationary little logo at the bottom right of this page. Is that kewel or what? It can be placed anywhere on the page with the attributions that come with the style. It's use is invoked from within the <head> and </head> tags of a web page, with a style command. See below this table an actual copy/paste version of a style to make this happen. These background properties are currently only available in IE, not on Netscape or the other browsers. |
| Style Name | Function | Attributes | Examples |
| image | Sets URL to background image | background-image:url(url goes here) | background-image:url(http://www.yourdomain.com/image.gif) |
| repeat | Sets repeat properties. Default fills screen. no-repeat stis where located repeat-x repeats horizontally only repeat-y repeats vertically only |
background-repeat: value | background-repeat: repeat background-repeat: no-repeat background-repeat: repeat-x background-repeat: repeat-y |
| attachment | Sets background to scroll or not scroll. Default is scroll. | background-attachment: value | background-attachment: scroll background-attachment: fixed |
| position | Sets position of background image. | background-position: value | background-position: top left background-position: top center background-position: top right background-position: center background-position: bottom left background-position: bottom center background-position: bottom right |
|
Here is an example of our style: <style type="text/css">
<!--
body
{
background-image: url(graylogo.gif);
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
-->
</style>
That's it, change the graylogo.gif to the complete URL to the image you wish to use. Change the other properties as you see fit if you so wish. It's worth noting that a dark image will hide the text on the screen. In this particular case it wouldn't matter too much because the stationary logo is at the bottom corner. If it was within the page, and dark in color, you would not be able to read whatever text was scrolling over it (while it was over it). Also worth mentioning is that any background color used within the styles for text will display over the background image. I left it that way for the table, which depending on the settings on your computer you may see the little gray logo blocked out where the table resides. For this page I changed the paragraph <p> style to eliminate the background I had defined for the regular style sheet encompassing the majority of the site. This particular page uses only the style contained within the <head> and </head> |
| © Copyright
Night Train Web Productions Night train Web Productions — All Rights Reserved No Part of This Work May be Reproduced by any Means Without Prior Written Authorization |
