Comments on: Printing watermarks with CSS

Question: Printing watermarks with CSS

mexican — Wed, 06 Apr 2005 00:41:38 -0800

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.

By: snowgoon

snowgoon — Wed, 06 Apr 2005 00:45:08 -0800

Try this

Basically you set the DIV for the screen CSS to:

display: none;

And for the print CSS to:

display: inline;

By: mexican

mexican — Wed, 06 Apr 2005 01:08:32 -0800

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.

By: sbutler

sbutler — Wed, 06 Apr 2005 01:12:01 -0800

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

Specifically, you want "position: fixed;"

By: sbutler

sbutler — Wed, 06 Apr 2005 01:12:36 -0800

(note: I don't know that this actually works, but the spec says that is how it should behave)

By: sbutler

sbutler — Wed, 06 Apr 2005 01:33:34 -0800

Okay, works as advertised on a nightly build of Camino. My test case is at http://www.ics.uiuc.edu/~sbutler1/fixed.html

By: mexican

mexican — Wed, 06 Apr 2005 01:43:04 -0800

position: fixed; looks like what I want. Now I just have to play with margins to keep my watermark off my other content. Thanks!!!

By: TheDonF

TheDonF — Wed, 06 Apr 2005 05:14:13 -0800

You want to be careful as IE (quelle surprise) doesn't support :fixed. It's the only browser not to.

By: kirkaracha

kirkaracha — Wed, 06 Apr 2005 06:51:01 -0800

Two ways to do :fixed in IE: CSS only and using dynamic properties.

By: Dick Paris

Dick Paris — Wed, 06 Apr 2005 08:08:30 -0800

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. :-)

By: nakedcodemonkey

nakedcodemonkey — Wed, 06 Apr 2005 09:52:33 -0800

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?).

By: djwudi

djwudi — Wed, 06 Apr 2005 19:47:36 -0800

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.