Watermark on every page of a PDF

A watermark has to appear on every page, which rules out simply putting a big rotated <div> in the document — that renders once, on page one, and the rest of the document is unmarked.

It also rules out position: fixed, which paints over content instead of flowing with it. That failure is measured in repeat a header on every page.

The mechanism that does repeat is the same one that repeats a header: display: table-header-group.

The technique

Wrap the document in an outer table, and put the watermark in a zero-height thead cell with an absolutely positioned pseudo-element.

<table>
  <thead>
    <tr>
      <td colspan="2" class="wm" style="height:0; padding:0; border:none"></td>
    </tr>
  </thead>
  <tbody>
    <!-- the document -->
  </tbody>
</table>

thead { display: table-header-group; }

.wm { position: relative; }
.wm::before {
  content: "DRAFT";
  position: absolute;
  top: 40%; left: 0; right: 0;
  text-align: center;
  font-size: 90px;
  font-weight: 800;
  color: rgba(220, 38, 38, .12);
  transform: rotate(-24deg);
  pointer-events: none;
}

The thead repeats on every page, so its pseudo-element does too. Height zero and no padding means it takes no vertical space, so the watermark costs nothing in layout — content starts exactly where it would have anyway.

Verified 2026-08-08: a 79-row document paginated to three A4 pages, with the watermark present on every page and the rows reading normally through it.

The caveat: vertical position is approximate

The pseudo-element is positioned against a zero-height box at the top of each page, so top: 40% does not mean "40% down the page" — it resolves against nothing and lands near the top. In the verified render the watermark sits in the upper portion of each page rather than centred on it.

Adjust with a fixed offset rather than a percentage, and expect to tune it once for your page size:

.wm::before { top: 90mm; }   /* roughly centred on A4 with 16mm margins */

If you need it exactly centred on every page regardless of page size, this technique cannot give you that. Nothing available in a Chromium renderer can, without a header template — which is unstyleable for the reasons in the repeating-header recipe.

Keep it light enough to read through

The most common mistake is a watermark that makes the document harder to read. Two rules that hold up:

• Alpha, not grey. rgba(220, 38, 38, .12) keeps the hue and stays out of the way. A solid light grey fights the text instead.
• Never over a table's numbers. Rotate it so it crosses mostly whitespace, and check a page that is dense rather than the first one, which usually is not.

Text, not an image

A text watermark is a few bytes and stays sharp at any print resolution. An image watermark costs base64 against the 512 KiB template ceiling and is soft when printed, because the source is almost always screen resolution.

If the watermark must be a logo, inline it as <svg> — vector, sharp, and part of the document rather than a fetch the renderer will not make.