Stupid Web Tricks: Add a watermark

Watermarks can truly be amazing. Learn how to create a watermark on your Web page.

Click here for our complete list of Stupid Web Tricks.

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 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 <head>:

Click here.

would fix the image logo.gif in the lower right corner of the screen. See the CSS specification for other background-position options.

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.

Step one

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.

Step two

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 id="waterMark" and style="position:absolute".

<div id="waterMark" style="position:absolute">
<a href="/index.html"><img src="/Images/watermark.gif" width=90 height=90 border=0></a>

Step three

Copy this script and paste it somewhere in the <head> of your Web page.

Click here.

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

The variables markW and 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 markX and markY, which represent percentages right and down from the upper-left corner of the screen. For example, 50 and 50 would place it in the middle of the screen, while 100 and 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

Editor's Picks