Wednesday, August 27th, 2008

Using CSS to do the print watermark technique

Category: CSS, Tip

Andy Pemberton has put together a simple solution to get the watermark technique to work nicely with print CSS.

Check out the sample and pull up a print preview. He details the good, bad, and ugly:

The Good

The first step to getting a printable watermark is to use an inline tag, rather than background-images. In most browsers, background-images won’t be printed unless the user selects an additional browser option to enable it.

From here, we need to place the watermark image so that it is repeated on each page. It looks like the W3C thought of this ahead of time in the positioning module. The position property’s fixed value should ensure that a watermark is printed on each page. Some browsers, like FireFox and Internet Explorer 7, apply this rule correctly.

The Bad

Not all browsers play nicely with position:fixed and we haven’t yet considered using z-indexing to ensure the watermark displays behind all the regular page content. For IE and FireFox 3+, simply applying z-index:-1 to the watermark will do the trick.

Though, it turns out that earlier versions of FireFox (and other Gecko-based browsers) don’t play nicely with negative z-indexing. So, my current approach uses a few Gecko-specific hacks to degrade the watermark approach for FireFox 2. For FireFox 2, the watermark will display over the content, but still display on every page. Unfortunately, this means the CSS for my approach doesn’t validate.

The Ugly

But of course, position:fixed isn’t supported at all in IE6; it appears to ignore the rule altogether and display the image inline. So, I use conditional comments to filter just a *few* IE6-specific hacks:

Absolute positioning and an additional 100% height on the watermark and printable content are the keys to getting this working for IE6:

div.watermark{
position:absolute;
overflow:hidden;
}
div.content{
height:100%;

}

Posted by Dion Almaer at 2:14 am
Comment here

++---
2.7 rating from 24 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.