Andy Pemberton Rotating Header Image

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:


<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" media="print" href="styles/watermark-print-ie.css" />
<![endif]-->

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.

27 Comments on “Print Watermarks with CSS”

  1. #1 Muad'Dave
    on Aug 24th, 2008 at 7:37 pm

    You rock, dude! What an awesome solution to a nasty problem!

  2. #2 Praveen Vijayan
    on Aug 25th, 2008 at 6:40 am

    Hay

    Coool solution for watermark printing :)

  3. #3 Chris
    on Aug 25th, 2008 at 9:49 am

    This is like a midair headshot on IE6. PWNED!

  4. #4 Ajaxian » Using CSS to do the print watermark technique
    on Aug 27th, 2008 at 3:28 am

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

  5. #5 Matt K
    on Aug 27th, 2008 at 5:14 pm

    [Safari 3.1.2]
    the good (ish): horizontal positioning works, first row causes the watermark to show on the first page (only)
    the bad: second row shows the watermark on the second page only
    the ugly: the third row causes the document to spread over 4 pages instead of 3, with the watermark on the 4th page, clipped a bit!

    just tried initial print preview and save to PDF

    good luck with this as it’s a nice concept!

  6. #6 Andy
    on Aug 27th, 2008 at 7:42 pm

    Matt: thanks for the testing! Unfortunately Safari (as of 3.1.2) doesn’t support the display:fixed property appropriately when printing, so I decided to kind of give up on support for Safari until they support it. Also, I tried out the latest WebKit nightly build and it has the same issue.

  7. #7 Print Watermarks with CSS | Fomly
    on Aug 29th, 2008 at 11:40 am

    [...] 29, 2008 at 11:26 pm · Filed under webdesign Link:Print Watermarks with CSS [...]

  8. #8 Muhammad Moazzam
    on Sep 24th, 2008 at 12:57 am

    I m facing issues in IIE7, when i put image tags in CONTENT DIV, with tags, it shows watermark only once and it shows this on page1 with blank contents, the actual data starts from page2 with no watermark :-/

  9. #9 Andy
    on Sep 24th, 2008 at 9:08 am

    Muhammad: is your layout table-based? If so, you’ll need to adjust the height on the TDs before the actual watermark div. See: http://www.andypemberton.com/sandbox/watermark/styles/watermark-print-ie.css

  10. #10 DV Punia
    on Nov 21st, 2008 at 12:36 pm

    Its a good solution but it does not seem to work if your doctype is => DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN> . I cann’t change the doctype because its generated by domino web server :( Is there a work around for this. Thanks.

    -DV

  11. #11 Andy
    on Nov 21st, 2008 at 1:35 pm

    @DV Punia: interestingly, I’ve run across the same problem w/Domino doctypes in other circumstances. I didn’t test the watermark technique under html 4 transitional doctype, but I do believe you can configure the doctype that domino generates.

    Good luck.

  12. #12 網站製作學習誌 » [Web] 連結分享
    on Apr 8th, 2009 at 11:10 pm

    [...] Print Watermarks with CSS [...]

  13. #13 david
    on Jul 21st, 2009 at 10:31 am

    you’re a coding rock star! worked flawlessly for me.

    suggestion: for beginner coders just looking to grab snippets of code, it would be nice if you had a link to the CSS. i’m a noob, and it took me a short while to realize that the i needed to add onto the address bar to view the code.

    hope you don’t mind. these are the links to the CSS code to be inserted after the

    http://www.andypemberton.com/sandbox/watermark/styles/watermark.css

    http://www.andypemberton.com/sandbox/watermark/styles/watermark-print.css

    and this goes after the body:

    replace img alt with whatever you want to appear given that someone cant load your watermark image. example, your image says confidential, so img alt will display “Confidential” in text form if someones browser wont load the actual image. also, src=”.jpg” is the relative link to your image.

    again, hope you dont mind, i just wanted to make it dummy proof.

  14. #14 david
    on Jul 21st, 2009 at 10:32 am

    edit the css code links go after the head, i put tags around head so it didnt come out.

  15. #15 david
    on Jul 21st, 2009 at 10:39 am

    double edit (sorry for not getting this all in one post)

    if you need the background image to scroll with the page as opposed to remaining fixed, change “fixed” to “absolute”:

    div.watermark{
    display:block;
    position:fixed;

    hope this helped some people.

  16. #16 Nick Wilcox
    on Nov 18th, 2009 at 6:16 pm

    This works great but in IE8, an extra blank page is printed once the code is put in place… any ideas why?

    Thansk!

  17. #17 Andy Pemberton
    on Nov 18th, 2009 at 7:58 pm

    Nick: I’m not seeing an extra page on IE8 with the example I included.

    Are you seeing this in the example or your HTML?

    I’m testing on IE 8.0.6001.18702

  18. #18 Nick Wilcox
    on Nov 19th, 2009 at 11:04 am

    Hi Andy,

    Thanks for getting back with me. I’m using your fantastic setup within a jQuery Thickbox to print a page. Could I send you an email offsite with the URL? It is currently in development and I don’t want to publish the URL.

    Thanks so much!

  19. #19 Nick Wilcox
    on Nov 19th, 2009 at 3:45 pm

    pilot error - second page printing issue was a problem in my thickbox call not your tutorial.

    My apologies and fantastic job with the tutorial!

  20. #20 fritz freiheit.com blog » Link dump
    on Dec 4th, 2009 at 5:08 pm

    [...] Print Watermarks with CSS � Andy Pemberton (CSS,Reference,Print,Image,Watermark) [...]

  21. #21 Josh
    on Dec 22nd, 2009 at 3:01 pm

    This is great. I’m having a problem getting it to work in IE6. When I navigate to the example “Test this page with tables”, the watermark only shows up on the 1st and 3rd page but not the second page. In my own example, I can only get it to show up on the first page. IE7 works fine for all. Any ideas?

  22. #22 chrome
    on Jan 5th, 2010 at 9:40 am

    chrome doesn’t print the watermark !
    have an idea ?
    (tested under V3.0.195.38)

  23. #23 Muyi Babs
    on Mar 1st, 2010 at 8:36 am

    I’m new to CSS so please give me a step by step instructions on how to do this on my web page. thanks

  24. #24 Judy
    on Apr 2nd, 2010 at 1:48 pm

    Hey Andy,

    This is so cool and it works great for me… lalala
    Only one minor issue. I am using tables for layout in IE6, when testing your solutions, if it is a multiple page print out, some of the pages do not have the water mark printed out. If you test your solution page with IE6, it has the same issue.
    If possible, please help. :)

  25. #25 derrick
    on Aug 7th, 2010 at 10:27 am

    I notice tt your watermark is not overlay over the text or image but under them. U have any solution to this? pls let me know… thk you!

  26. #26  Wet Saw
    on Aug 16th, 2010 at 9:03 am

    IE8 has some bugs too although it is more stable than IE7 and IE6.-`

  27. #27 Andy Pemberton
    on Aug 16th, 2010 at 9:36 am

    Derrick: you should be able to simply remove the z-index:-1 from div.watermark in the CSS.

Leave a Comment