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.

Why don't you [contact their helpdesk](http://www.antennahouse.com/antenna1/customer-service-guidelines/)? — Liam, Mar 23 '15 at 13:13
Because I'm not sure whether this is a bug or just an incorrect stylesheet. — Hobbes, Mar 23 '15 at 13:17
for starters, if you use #backgounrd, and #watermark, it is unqiue ID selector, it will only effect the first ID it "see". I can suggest you change it to .watermark and .background, and make sure each page div has class="background" and "watermark" accordigly — Ziv Weissman, Mar 23 '15 at 13:20
Ultimately it's down to the client how the "pages" are rendered, the client in this case is Antennahouse, so without this software it's going to be very difficult (if not impossible) to help you. — Liam, Mar 23 '15 at 13:22
@Ziv, good point, but the HTML that goes into Antennahouse doesn't have page breaks, it's just a long list of topics. Antennahouse decides where to break the page (based on hints in the css like styles that specify page-break-after=avoid). — Hobbes, Mar 23 '15 at 13:24

score 2 · Answer 1 · answered Jan 18 '16 at 12:42

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.

I didn't see any examples so I posted it here for similar problems. If this isn't a solution I dont know what you what to accomplish. — pwavg, Jan 18 '16 at 14:13
I found if I place the watermark in the text area, the watermark will be placed on top of the text, not underneath it. So my text became less legible. — Hobbes, Jan 18 '16 at 14:20

Hobbes · Answer 2 · 2016-01-18T14:36:20.993

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.

score 0 · Answer 3 · answered Jan 16 '16 at 00:52

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.

score 0 · Answer 4 · answered Mar 29 '21 at 12:08

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>

Back in 2015, despite specifying z-index = -1, the watermark was placed on top of the body text. It's possible this was a bug in the then-current version of Antennahouse Formatter that's since been fixed. — Hobbes, Mar 29 '21 at 12:44

score 0 · Answer 5 · answered May 14 '21 at 16:08

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

Creating watermark text in CSS Paged Media

5 Answers5