Watermarks With Cascading Style Sheets
Expert Author
Article Date: 2003-08-22
In the print industry the sign of quality paper is a company watermark or brand emblem. This same effect can be achieved for your company's web site using CSS. This effect is compatible only with MIE4+ and NS6.1+. Older browsers will simply not render the watermark.
The code for watermarking is done utilizing the background-image, background-repeat, background-attachment, and background-position CSS properties. This code can be placed within your external style sheet applying it to the body tag. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"
body {background-image: url(back.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;}
If you do not have a company logo, it may be time to have one designed. Or simply use a piece of royalty-free clipart. Open your image into your graphics software and decrease the transparency to whatever best suits your needs. Keep in mind that watermarks are generally one to three shades darker than the background color. Your text must easily be read on your web pages or the concept is lost.
It is common to use the no-repeat property so the image appears as a professional watermark and align the watermark either in the center of the page (as shown in the code above) or at the bottom right of the page replacing the background-postion property with the code below:
background-position: right bottom;
To view a demo page with a watermark using this concept, Click Here.
About the Author:
BasicTemplates.com designs Website Templates with External CSS and has been providing webmasters worldwide with affordable template designs since 1994. BasicTemplates currently offers 650+ designs which may be purchased individually or get complete access to all templates via an affordable membership plan. Most templates were strategically designed with interchangeable graphics and elements to increase the potential number of design layouts for the end user. Each layout utilizes an external style sheet for easy site maintenance and to ensure fast page load.
