Creating watermark text in CSS Paged Media

Question

I've got a watermark that I need to repeat on every page of a PDF. The source text is a div in my HTML:

<div id="all"> (outermost container)
     <div id="background">
        <p id="watermark">Internal Use Only - Do Not Duplicate</p>
     </div>
    (more divs with the content of the book)
</div>

In my CSS, I have these declarations:

#background {
   position: absolute;
   display: block;
   top: 30mm;
   left: 10mm;
   bottom: 30mm;
   right: 10mm;
   z-index: -1;
   overflow: visible;
}
#watermark {
    color: cmyk(0,0,0, 0.4);
    font-size: 24pt;
    transform: rotate(-45deg);
}

This sort of works: the watermark is displayed on the first page of the PDF, but not on subsequent pages.
How can I get the watermark to display on every page?
I've tried various solutions, but the ones I found were all geared toward use in browsers and didn't address paged media.
I know this can be done with image watermarks, but I'd rather use text because it's a lot easier to change the text if e.g. a document gets translated.

I'm using Antennahouse to convert the HTML+CSS to PDF.

Answer 1

Use position: running(Watermark) for the div, and in one of your page-margin boxes, use content: element(Watermark). (The name does not matter as long as it's the same in both places.)

Have a look at how tabs are done in the Introduction to CSS for Page Media book at https://www.antennahouse.com/css

Answer 2

You can customise one of the page margin boxes so that it looks like a watermark in the background:

@page {
  @left-middle {
    height: 0;
    content: 'DRAFT';
    color: #eee;
    font-size: 200pt;
    z-index: -1;
    transform: rotate(45deg);
    margin-left: 20mm;
    margin-top: -140mm;
  }
}

Note that you can also customise a watermark in the foreground in by setting in your Antenna House options XML file:

<?xml version="1.0"?>
<formatter-config>
  <formatter-settings
      watermark-text="DRAFT" />
</formatter-config>

Answer 3

I haven't gotten this to work yet.
I do have a workaround: I can place text in one of the margin boxes on the left side of the page. When I specify the height and width of this box to overlap the body area, I can create a watermark effect.
This method has one drawback: despite specifying z-index = -1, the watermark will be placed on top of the body text, not underneath it. This means my text became less legible.

Answer 4

This question was asked some time ago but I think the best answer is to handle this with the @page rule.

From W3C :

Authors can specify various aspects of a page box, such as its dimensions, orientation, and margins, within an ‘@page’ rule. ‘@page’ rules are allowed wherever rule-sets are allowed. An ‘@page’ rule consists of the keyword ‘@page’, an optional comma-separated list of page selectors and a block of declarations (said to be in the page context). An ‘@page’ rule can also contain other at-rules, interleaved between declarations. The current level of this specification only allows margin at-rules inside ‘@page’. read more...

One solution is to define @page in your stylesheet and use the css content property to place the watermark. Example:

@page:right {

    @top-left{
        content: 'Internal Use Only - Do Not Duplicate';
        font-size: 9pt;
        color: #000;
    }
}

Every page will contain the watermark in the top left.

Answer 5

If you use position : fixed for your watermark, you should be able to get it to work in Firefox, Opera and Internet Explorer.

Firefox, Opera and Internet Explorer do repeat elements with position: fixed on every printed page.

Unfortunately, there does not appear to be a way to do this in Webkit browsers (Chrome, Safari). Even when using position : fixed, these browsers will only render the element on the first printed page.