By Paul Anderson
Traditionally, watermarks were used to identify real, dead-wood pages because they didn't obscure what was printed on them. Then GeoCities came along and took the watermark concept into the digital age. Through a neat little technological trick, a semitransparent GeoCities logo seems to hover in place, independent of the page it appears on. Sure it's annoying, but it's also pretty amazing. If you have a 4.0 or higher browser, notice the CNET Builder.com watermark in the lower right corner of this page.
There are a few ways that you can go about creating a watermark on your page. The simplest method is to use CSS to position a fixed, untiled image in the background. For example, putting this code within your page's
would fix the image logo.gif in the lower right corner of the screen. See the CSS specification for other
The CSS method has its limits, however. It doesn't work on rickety, old Navigator 4, and it confines you to a single image. If you want to be truly cross-browser compatible, or if you'd like your watermark to have links, text, or other HTML, you'll need to use Dynamic HTML, like GeoCities does. We've written a script that works on all browsers and gives you some extra choices.
Create the graphic or design for the watermark. It can be almost any kind of HTML, though images have the advantage of exact dimensions, which you'll need to supply in the script. Also, take some time to think through the overall design of the pages on which the watermark will appear. Should the graphic seem to be transparent? Should it blend in with the background color? How big should it be? We recommend that you make the watermark subtle so that it doesn't end up obscuring the page or distracting your audience.
Place the watermark on your page where you want it to appear on non-DHTML browsers (say, the bottom). Then nest it inside a
<div> tag with the attributes
<div id="waterMark" style="position:absolute">
<a href="/index.html"><img src="/Images/watermark.gif" width=90 height=90 border=0></a>
Copy this script and paste it somewhere in the
<head> of your Web page.
The first lines of the script establish five variables that you can adjust to suit your watermark.
markW = 64; // pixels wide
markH = 64; // pixels high
markX = 100; // percent right
markY = 100; // percent down
markRefresh = 10; // milliseconds
markH should equal the pixel width and height, respectively, of the watermark. Size it generously if your watermark includes HTML text. You then set the watermark's position on the page with
markY, which represent percentages right and down from the upper-left corner of the screen. For example,
50 would place it in the middle of the screen, while
0 would put it on the top right. Finally, adjust
markRefresh to indicate how often, in milliseconds, you want the browser to update the watermark's position. A lower number means less delay between the page scrolling and the watermark repositioning itself, but it will also place more demand on the browser.
Paul Anderson is associate technical editor for CNET Builder.com