Floating Logo a la Geocities

From c|net (http://www.builder.com/)
Traditionally, watermarks were used to identify real, dead-wood pages because they didn't
obscure what was printed on the page. 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've got
a 4.0 browser, notice the watermark in the lower right corner of this page.

There are a few ways you can go about creating a watermark on your page. For users of
Internet Explorer, for example, you could simply use <BODY background="graphics/g.gif"
bgproperties=fixed>. But this approach doesn't work in Navigator, and it tiles
your graphic automatically.

But for cross-browser functionality you'll need to use Dynamic HTML (DHTML) instead.
GeoCities uses a server-side script to detect the browser and send a specifically
Navigator- or Internet Explorer-compatible watermark. Instead, we've written a single
client-side version which works on both browsers and even gives you some extra choices.

Step 1
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 appear to be transparent? Should it blend in
with the background color? How big should it be? We recommend you make it subtle, so that
it doesn't end up obscuring the page or distracting your audience.

Step 2
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".

The variables markW and markH should equal the pixel width
and height, respectively, of the watermark. Approximate this generously if your watermark
includes HTML text. You then set the watermark's position on the page with markX and markY, which represents 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 also places more demand on the browser.