Wkhtmltopdf with full page background

I have a wkhtmltopdf working with a header and footer image and everything is well placed. But the challenge is to use a full screen background image that looks like a kind of frame with the page text in the center. I thought I could put this in the header, but it won't work - maybe using the full page header doesn't make sense here.

(These are multi-page documents and can be of any length.)

Any ideas on how to do this?

Thanks in advance.



source to share

2 answers

I have a similar problem, this is what I have figured out so far:

  • It is not possible to center text vertically on a page simply with CSS + wkhtmltopdf on a multipage document (might find some tricky javascript stuff, but it didn't matter in my case);
  • since wkhtmltopdf uses webkit and webkit does not support @page rules, it is not possible to define a "laid out" background via CSS

Hence what? You will need a little hack and use pdftk

1. In CSS, define:

body {
    background: white;


(if you have a body tag in your header.html and footer.html, make sure this rule applies to them too)

2. Create a one page PDF with a background image (using the same page size as your final pdf)

3. Install pdftk and from the command line:

$ pdftk yourfile.pdf background background.pdf output yourfile_b.pdf


4. Enjoy :)



You can use the BASED solution on the webkit like HTM2PDF - you can add a "stationary" feature where you can integrate any image into a full screen background.

more information in the documentation from the API page



All Articles