How Can I Create a Watermark on a Web Page?

Question: How Can I Create a Watermark on a Web Page?

Answer:

Watermarks are easy to create using three CSS style properties:

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

You use background-image to define the image to use as your watermark, background-repeat to make it display only once, and background-attachment to turn it into a watermark.

Add the following to the HEAD of your Web page. Change the URL to your background image, and you'll have a watermark:

<style>
<!--
body {
background-image: url(image.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
//-->
</style>

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.