Print Watermarks with CSS

So, as we all know - CSS has its limitations. If you’ve ever tried to implement printable watermarks with CSS, then you’ve no doubt come across a few of them. From vertical centering, to cross-browser feature support, to mysterious print-mode CSS rendering - printable watermarks turn out to be a real pain to get working across the browser-space. I spent a good amount of time cracking this nut this weekend and thought I’d share.

Go straight to the CSS print watermark example page.

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%;
}

Conclusion

So, this approach still needs a bit of testing. I want to ensure that backgrounds, margins, and paddings don’t break the layout - want to test a few more of these types of edge-cases. One way or the other, I hope you find it useful. if you like it or find problems with it, feel free to comment.