How to set background image on each page

[zakk616]

I'm tried to generate a report from HTML to PDF, but i want to render a background image on each page... currently I'm using this code:

const options = {
        margin: [0.5, 0, 0, 0],
        filename: 'filename.pdf',
        image: {
            type: 'jpeg',
            quality: 0.98
        },
        html2canvas: {
            scale: 2
        },
        pagebreak: { avoid: '#row' },
        jsPDF: {
            unit: 'in',
            format: 'a4',
            orientation: 'p'
        }
    }

var element = document.getElementById('pf1').innerHTML;

var footerLogo = 'data:image/png;base64,iVBORw0K.........GgoAAAA';
var backgroundImg = 'data:image/png;base64,iVBORw0K..........GgoAAAANSU';

html2pdf().from(element).set(options).toPdf().get('pdf').then((pdf) => {
      var totalPages = pdf.internal.getNumberOfPages();
      for (let i = 1; i <= totalPages; i++) {
          // set footer to every page
          pdf.setPage(i);
          // set footer font
          pdf.setFontSize(10);
          pdf.setTextColor(150);
          pdf.text(pdf.internal.pageSize.getWidth() - pdf.internal.pageSize.getWidth() + 0.3,
              pdf.internal.pageSize.getHeight() - 0.3, 'Page ' + i + ' of ' + totalPages);

          pdf.addImage(backgroundImg, 'png', 1.5, 3.5, pdf.internal.pageSize.getWidth() - 3, pdf.internal.pageSize.getWidth() - 3)
          pdf.addImage(footerLogo, 'png', 0, 0, pdf.internal.pageSize.getWidth(), 0.3)
      }
      window.open(pdf.output('bloburl'), '_blank');
});

Output:

the background image renders on the pdf content instead of being rendered behind.

[zakk616]

still looking for this help...

[Monarul007]

@zakk616 Did you got any solution for this?

[zakk616]

@Monarul007 I manged to do it using the background code, sample is here:

codepen link