Watermarks

Watermarks in EuroPDF are defined in CSS using the documented @prince-overlay page region. There are two patterns:

1. Text-only watermarks — set content: "DRAFT" directly on @prince-overlay. Prince auto-centers it. No HTML changes required.
2. Complex watermarks (rotated text, images, styled elements) — put an HTML element in the body, mark it with position: running(name), and reference it from the overlay with content: element(name). This is Prince’s standard mechanism for flowing arbitrary content into a page region.

Pattern 1 is the documented @prince-overlay example from the Prince watermarks cookbook. Pattern 2 combines @prince-overlay with Prince’s running-elements mechanism so you can flow an arbitrary rotated or styled element into the overlay region.

A complete example

<style>
  @page {
    size: A4;
    margin: 2.5cm 2cm;
    @prince-overlay { content: element(wmk); }
  }
  .watermark {
    position: running(wmk);
    text-align: center;
    font-family: Helvetica, sans-serif;
    font-size: 140pt;
    font-weight: 700;
    color: rgba(19, 0, 72, 0.08);
    transform: rotate(-30deg);
  }
</style>

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

<h1>Chapter One</h1>
<p>...</p>

The .watermark div is a normal HTML element. position: running(wmk) removes it from the document flow; content: element(wmk) inside @prince-overlay pulls it into the full-page overlay region on every page. Because it is a regular element, any CSS works — including transform: rotate() for diagonal text, which is not supported directly on margin boxes.

More examples

Simple text watermark (no rotation)

@page {
  @prince-overlay {
    content: "CONFIDENTIAL";
    color: rgba(191, 0, 0, 0.15);
    font-family: Helvetica, sans-serif;
    font-size: 90pt;
    font-weight: 700;
  }
}

The most basic @prince-overlay usage from the Prince cookbook. content is a string, Prince auto-centers it in the middle of every page. For rotation, use the running-element pattern from the main example.

Image watermark

.watermark { position: running(wmk); text-align: center; }
.watermark img { width: 300pt; opacity: 0.18; }
@page { @prince-overlay { content: element(wmk); } }

<div class="watermark"><img src="seal.svg" alt=""></div>

Wrap the image in a running element and reference it from the overlay. Any image format Prince supports works — SVG, PNG, JPG, WebP. Control opacity and size with standard CSS on the <img>.

Colored page background

@page {
  size: A4;
  background-color: #ffe066;
}

Fills the entire physical page. Useful for branded stationery or high-visibility draft pages. Make sure “print backgrounds” is enabled if you send the PDF to a printer.

Full-bleed cover background

@page {
  size: A4;
  background-image: url("cover.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Background image fills the entire page. For SVG sources, set preserveAspectRatio="none" so the image stretches without letterboxing. Combine with @page :first to apply only to the cover page.

Watermark only on body pages (cover stays clean)

@page { @prince-overlay { content: element(wmk); } }
@page :first { @prince-overlay { content: none; } }

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

Suppresses the overlay on the cover page only. Use named pages to suppress on chapter openers or other specific sections.

EuroPDF wraps PrinceXML — the full reference for watermarks, @prince-overlay, and running elements lives in the Prince cookbook.