Tips for Creating a Watermark on a Web Page

Execute the technique with CSS

f you're designing a website, you might be interested in learning how to create a fixed background image or watermark on a web page. If you've never done this before or have tried to previously without luck, the process might seem intimidating, but it's actually not very difficult. With this brief tutorial, master the technique in a matter of minutes using CSS.  

Getting Started

Watermarks gained popularity because they didn't hide the content featured on them.

In the 21st century, the watermarks have become more sophisticated, but they are easy to create using the following three CSS style properties:

  • background-image
  • background-repeat
  • background-attachment

Use background-image to define the image to use as your watermark. On the other hand, background-repeat should be used to make it display only once. And, finally, use background-attachment to turn it into a watermark.

After you've followed the above steps, add the following to the HEAD of your Web page. Change the URL to your background image, and, voila, you'll now have a watermark:

 body {
 background-image: url(image.gif);
 background-repeat: no-repeat;
 background-attachment: fixed;

Other Tips

If you want to place the watermark in a specific location on your Web page (say, the middle of the page), add the background-position property to your style to place the image.

And, remember, while CSS is the easiest way to create a fixed watermark, it does have drawbacks. For example, It doesn't work on older versions of web browser. It will also restrict you to just one image. With that in mind, if your aim is to make the page a fit with multiple browsers or you want the watermark to contain links, Dynamic HTML is your best bet.

Here's a script that is compatible across browsers and gives you other options as well.