New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Watermark Background Image Script

Author: Dynamic Drive

Description: "Watermark" is a word most people in the desktop publishing arena are familiar with; it refers to a figure or design impressed to the paper and always visible in the background. Well, a watermark background image is very similar in concept to a watermark. It refers to an image that is statically positioned in the background of the document, and always visible (even when the user scrolls the page). In the past, you may have used the bgproperties attribute of IE 3 to create a watermark. The problem with this attribute is that it tiles the watermark image if it does not fill the browser screen (like any background image), so in order for the effect to be successful, the size of this image has to be nearly as large as the screen. In IE 4 and NS6, CSS can be used to create a watermark background that does not tile, meaning you can comfortably use an image of any size as the watermark image. Finally!

Demo: Look at the background. It contains an image that remains in the background and static, even if the page is scrolled. That would be the watermark image!


Directions

Step 1: Simply insert the below code into the <body> section of your page, immediately following the <body> tag itself. Change notebook.jpg to reference your own background image.

Select All

This script is designed to be completely cross-browser friendly. What this means is that you can by all means specify a "regular" background image to be used for surfers using browsers other than IE 4 and NS6 to view. Just use the good old background attribute of the <body> tag to specify this alternate background image.