Wednesday, August 27th, 2008
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 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.
Not all browsers play nicely with
position:fixedand 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:-1to 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.
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:
Posted by Dion Almaer at 2:14 am