I am using html-pdf (https://www.npmjs.com/package/html-pdf) to generate PDFs based on HTML files. I am now trying to add background images to these PDFs. One special/additional requirement is that the first page should have another background image than pages 2...n.
My attempt was to make use of the header feature, but the background images are never shown.
I added a header to the template, which is shown correctly, and tried to add a background image using the following CSS:
#pageHeader:after,
#pageHeader-first:after {
content: "";
display: block;
position: fixed;
bottom: 0;
right: 0;
top: 0;
left: 0;
height: 297mm;
width: 210mm;
background-image: url('/background-default.jpg');
background-repeat: no-repeat;
background-size: contain;
}
Just for reference, this is how I am adding the headers within the HTML file:
<div id="pageHeader">Test1</div>
<div id="pageHeader-first">Test2</div>
Any idea what I am doing wrong here? Or is there a better way to achieve what I am looking for?
I found the solution for the problem:
Due to PhantomJS limitation, apparently I have to also add the images to the body and hide them using display: none; Once that's done, the images will also show in the header/footer sections of html-pdf.
More detailed information can be found here: https://github.com/marcbachmann/node-html-pdf/issues/12