Embedding a background image in pdfmake

You can also use the background property

 background: {
          image: AegleBase64,
          width: 200,
          opacity: 0.05,
          absolutePosition: { x: 150, y: 250 },
        },

which allows you to spcify the width of the image and use the absolutePosition to give it a position that suits your use case


This would overlap your text with you Image (will act as background image). This solution can work for multiple images as well.

Example code:

var dd = {
    content: [
        {
            image: 'sampleImage.jpg',
            width: 200
        },
        {
            text: 'Text over image',
            absolutePosition: {x: 100, y: 50}
        }       
    ]
}

Turns out that in order to set an image as the background, one needs to decide on the .pdf output size, size the bkg image appropriately and then indicate all dimensions in the function as follows (I'm using AngularJS with this):

$scope.pdfMaker = function() {
var docDefinition = {
  pageSize: 'LETTER',
  background: [
   {
       image: 'data:image/jpeg;base64,/9j/4QAY...',
       width: 792
   }
 ],
 //other parameters go here
}

Indicating pageSize and width of the image was crucial to having the image appear in the background.

Let me know if there are errors in this method or if anyone had success doing it in a simpler way.