Putting a watermark on an image allows you to protect it from people who might try to steal it. But a watermark on a Web page does not serve the same purpose. In fact, in most cases, a watermark on a Web page is simply an effect to add interest to the design of the page.
How to Create a Basic Watermark
There are two different ways you can put a watermark on your page. The first is with style sheets. You simply set the background image of your page to be "fixed" and "no-repeat", and modern browsers will create a watermark of the image.
For example:
style>
<!--
  body {
    background : URL of background image;
    background-repeat : no-repeat;
  }
-->
</style>
The other type of watermark is done with DHTML. You could see this type of watermark on Geocities and other Web pages. It creates an image or HTML region that seems to float somewhere on the page.
How to Create a Floating Watermark Using a Dynamic Drive Script
- Create an image to use as your watermark
The image should be small, and preferably at least somewhat transparent, as your readers can't read through solid images.
- Put your watermark on the page
Place it where you want it for browsers who don't have DHTML capabilities. I usually put the watermark at the bottom of the page.
- Surround the watermark inside <div> tags with the following
attributes:
<div id="watermarklogo" style="position: absolute;">
- Place the following at the bottom of your Web page, before the </body>:
<script src="staticlogo.js"></script>
- Go to the Dynamic Drive site and grab the JavaScript you want to use to place your logo.
- staticlogo.js (Lower right corner logo)
- staticlogo2.js (Lower left corner logo)
- staticlogo3.js (Upper left corner logo)
- staticlogo4.js (Upper right corner logo)
- Modify the script to match your logo dimensions.
- Rename the script "staticlogo.js" and upload it to the same directory as your Web page.
