Blog

Background color on header / footer in Headless Chrome

Published Jul 26, 2023

Intro

If you are generating PDF files from URLs or HTML with Headless Chrome and are trying to have a background color in the header or footer template of the resulting PDF file, you might be running into issues. This is even the case when you are using puppeteer on top of headless chrome.

The goal is to achieve something like the screenshot below.

Add a colored background to your PDF header / footer in Headless Chrome and puppeteer.

The header template HTML would be in this github gist: https://gist.github.com/apexdodge/d5d1740e85086ee2d4ff9cf17e96ad0a

The key is to add css for html { -webkit-print-color-adjust: exact; margin-top: -20px; }. You could change it to margin-bottom: -20px if you are doing a footer. Otherwise you might see a white bar above or below your content.

Take note that the “printBackground”: true attribute that you pass in via options will not have any effect either way. You have to use the css above.

If you are using the API2PDF REST API, this gist payload is a working example: https://gist.github.com/apexdodge/b8b82c18dd78680208e136474a88635b