Anticlue

Using a watermark image

Using style sheets one can easily add a watermark image to the back ground of a page by manipulating a few properties.

The background-image: url(watermarklocation) picks the image to be manipulated.

The background-attachment property controls whether the image is in a fixed location or scrolls with the page.

The background-repeat property indicates how the image is repeated. The choices are repeat, repeat-x, repeat-y, and no-repeat. (self-explanatory)

The background-position property sets the images location on the page, you can either use percent percent, length length, or location location. The first value is the vertical indication, the second value is the horizontal indicator. For percent percent, 0% 0% indicate the top lefthand corner. With length length, you set the distance out, ie 2cm 2cm. For the location, you have a choice of top center bottom for the x, and left, center, right. If you only choose the vertical indication, the default for the horizontal is center.

The full w3c description on css backgrounds can be found here.

An example of this is:

body
{
background-image:url("image/watermark.gif");
background-attachment:scroll;
background-repeat:no-repeat;
background-position:center center;
}