How it renders / background on body
How to put a background or watermark on every PDF page
A background set on html or body covers the canvas, which in a paged context means every page, though how it repeats depends on whether it is sized to the page or to the document.
What it is for
Letterhead paper, a draft watermark and a subtle brand tint are all one-line effects if the background lands correctly, and awkward hand-placed elements if it does not.
Support: Works in a browser-based render
The background paints, since backgrounds are on by default here. Sizing it per page rather than per document is the part that needs care, because the document is taller than one page.
The syntax
Written the way it would appear in a document stylesheet, using background on body as intended.
/* Sized to one page, repeating down the document, so it lands once per page. */
body {
background-image: url("data:image/png;base64,...");
background-repeat: repeat-y;
background-size: 210mm 297mm;
background-position: top center;
}
/* And the render needs backgrounds enabled at all: */
/* On by default. Only an explicit print_background of false disables it. */The mistake people make
Sizing with background-size: cover, which sizes to the whole document rather than to a page, producing one enormous stretched image spread across all of them.
Frequently asked
Does background on body work when generating a PDF?
Works in a browser-based render. The background paints, since backgrounds are on by default here. Sizing it per page rather than per document is the part that needs care, because the document is taller than one page.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to force background colours to print
print-color-adjust. Works in a browser-based render.
Does @media print apply when generating a PDF
@media print. Works everywhere.
How to stop a PDF rendering in dark mode
prefers-color-scheme. Works everywhere.
Why position: fixed behaves strangely in a PDF
position: fixed. Works in a browser-based render.
Why images look blurry in the PDF
image-rendering. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.