Printing watermarks with CSS

April 6, 2005 12:41 AM

What CSS properties do you need to set to get a DIV to show up on every page of the printed version of a web page?

I'm doing some work for a company that requires a confidentially notice on all printed documents. The notice could be an image but I'd prefer to use a DIV so that the contents of the notice can be easily edited. It would also be nice if the notice wasn't rendered on top of other content. I'm using separate style sheets for web and print versions a-la the wikipedia monobook skin.

posted by mexican to Computers & Internet (11 answers total)

Try this

Basically you set the DIV for the screen CSS to:

display: none;

And for the print CSS to:

display: inline;
posted by snowgoon at 12:45 AM on April 6, 2005

Response by poster: I already know how to separate screen and print elements. What I want to do is have on print element that shows up on every physical page of the printed version. I read somewhere that this could be accomplished using z-index and float but I couldn't find any examples and haven't been getting very far with trial and error.
posted by mexican at 1:08 AM on April 6, 2005

http://www.w3.org/TR/CSS21/visuren.html#choose-position

Specifically, you want "position: fixed;"
posted by sbutler at 1:12 AM on April 6, 2005

(note: I don't know that this actually works, but the spec says that is how it should behave)
posted by sbutler at 1:12 AM on April 6, 2005

Best answer: Okay, works as advertised on a nightly build of Camino. My test case is at http://www.ics.uiuc.edu/~sbutler1/fixed.html
posted by sbutler at 1:33 AM on April 6, 2005

Response by poster: position: fixed; looks like what I want. Now I just have to play with margins to keep my watermark off my other content. Thanks!!!
posted by mexican at 1:43 AM on April 6, 2005

You want to be careful as IE (quelle surprise) doesn't support :fixed. It's the only browser not to.
posted by TheDonF at 5:14 AM on April 6, 2005

Two ways to do :fixed in IE: CSS only and using dynamic properties.
posted by kirkaracha at 6:51 AM on April 6, 2005

For what it's worth, sbutler's example does not keep the fixed element on every printed page within Safari. It works as a fixed screen element but not as a fixed printed page element. Works in Firefox though. :-)
posted by Dick Paris at 8:08 AM on April 6, 2005

Keep in mind that "requires" and CSS don't really mix. Not every user-agent (i.e. browsers, but also screenreaders, PDAs, etc) will support CSS, let alone postion:fixed, let alone @print. If the watermark absolutely positively has to be there no matter what, you probably want to make the content available only through media where you have more control (PDF? Flash?).
posted by nakedcodemonkey at 9:52 AM on April 6, 2005

Hmmm...just brainstorming here.

I'm pretty sure that what's been suggested above won't quite do it (at least, not across all browsers), as it won't put the watermark across every single printed page, merely the page that the `position: fixed;` resolves to.

So, while I haven't worked out code for any of this, here's what's in my head:

Add a `div` that only shows on the printed sheet, floats to one side or the other, and essentially displays as a column the height of the entire document. Create your watermark as a graphic running vertically, and set it into that `div` as a `background: repeat-x` (or maybe `repeat-y`, I can never remember which is horizontal and which is vertical without futzing around).

As long as the `div` is hidden in the screen version, you're good, and the print version will have a vertical watermark running down the outside of one side (whichever you chose).

I think.

As I said, I haven't actually tried this, it's just the first solution that popped into my head.
posted by djwudi at 7:47 PM on April 6, 2005