Html – Add text watermark in print mode using css that works for all major browsers

csshtml

I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.

I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?

For those curious as to what my html/css looks like at the moment:

<div class="watermark">This is a watermark!</div>

@media print {    
    .watermark {
        display: inline;
        position: fixed !important;
        opacity: 0.25;
        font-size: 3em;
        width: 100%;
        text-align: center;
        z-index: 1000;
        top:700x;
        right:5px;
    }
}

Any help is much appreciated!

Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).

Best Answer

The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.

The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.

Something like (untested):

@media all {
  .watermark {
    display: none;
    background-image: url(...);
    float: right;
  }

  .pagebreak {
    display: none;
  }
}

@media print {
  .watermark {
    display: block;
  }

  .pagebreak {
    display: block;
    page-break-after: always;
  }
}

<body>
  some content for page 1...

  <div class="watermark"></div>
  <div class="pagebreak"></div>

  some content for page 2...

  <div class="watermark"></div>
  <div class="pagebreak"></div>
</body>

Really I think those 2 classes could just be the same element, but this seemed more understandable in code.

The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.

Related Topic