Invoice background questions

Self-Hosted | v4/Legacy
1

I’ve tried a couple of things to get a background image to work. Although pdfmake does support a background image, i can’t get it to work properly with invoice ninja. Although i am able to add a background image, i have no control over the width / height of it.

My solution is an image as first content block and absolute positioning it. This works, but only on the first page (see my code example). My questions:

  • How can i get an invoice background on every page with the possibility to control width / height?
  • Is it possible to use a different background for pages 2-x? 
 {
    "image": "data:image/png;base64...very long data uri string",
    "width": 595.28,
    "height": 841.89,
    "absolutePosition": {
      "x": 0,
      "y": 0
    }

note: width / height are A4 sizes

2

Have you tried using the option on Settings > Invoice Designs > Invoice Options

3

Yes and i get a background.

But, i have no control over the size, it’s gigantic and margins are all wrong.

4

There should be a ‘Background’ tab on Settings > Invoice Design > Customize where you can adjust it.

5

@Hillel Yes, that’s it and thank you for your help!

Now i can use a background image in the proper way and adjust it’s width / height.
The second page doesn’t show my background image. I’ve removed the absolute position part, but still no sigar.

I’m using the self-hosted invoice ninja and i’m adjusting the custom1 design template. I’ve copied the content from the table ‘account’ > field ‘custom_design1’:


{
   "content":[
      {
         "stack":[
            {
               "columns":[
                  {

                  },
                  {
                     "width":"50%",
                     "stack":"$clientDetails",
                     "fontSize":"12",
                     "margin":[
                        10,
                        50,
                        0,
                        60
                     ]
                  }
               ]
            },
            {
               "columns":[
                  {
                     "width":"50%",
                     "table":{
                        "body":"$invoiceDetails",
                        "widths":[
                           140,
                           70
                        ]
                     },
                     "layout":{
                        "hLineWidth":"$none",
                        "vLineWidth":"$none",
                        "hLineColor":"#E6E6E6",
                        "paddingLeft":"$none",
                        "paddingRight":"$none"
                     },
                     "fontSize":"12"
                  }
               ]
            },
            {
               "style":"invoiceLineItemsTable",
               "table":{
                  "headerRows":1,
                  "widths":"$invoiceLineItemColumns",
                  "body":"$invoiceLineItems"
               },
               "layout":{
                  "hLineWidth":"$notFirst:1",
                  "vLineWidth":"$none",
                  "hLineColor":"#e6e6e6",
                  "paddingLeft":"$none",
                  "paddingRight":"$none",
                  "paddingTop":"$amount:10",
                  "paddingBottom":"$amount:10"
               },
               "fontSize":"10"
            },
            {
               "columns":[
                  {
                     "width":"*",
                     "text":""
                  },
                  {
                     "width":"auto",
                     "style":"subtotals",
                     "table":{
                        "widths":[
                           "*",
                           70
                        ],
                        "body":"$subtotals"
                     },
                     "layout":{
                        "hLineWidth":"$none",
                        "vLineWidth":"$none",
                        "paddingLeft":"$none",
                        "paddingRight":"$none",
                        "paddingTop":"$amount:5",
                        "paddingBottom":"$amount:5"
                     },
                     "fontSize":"10",
                     "margin":[
                        0,
                        -15,
                        0,
                        0
                     ]
                  }
               ]
            },
            {
               "columns":[
                  "$notesAndTerms"
               ],
               "style":"notesAndTerms"
            }
         ],
         "margin":[
            60,
            130,
            60,
            60
         ]
      }
   ],
   "footer":{

   },
   "defaultStyle":{
      "fontSize":8
   },
   "styles":{
      "primaryColor":{
         "color":"$primaryColor:#299CC2"
      },
      "accountDetails":{
         "margin":[
            0,
            2,
            0,
            1
         ]
      },
      "accountAddress":{
         "margin":[
            0,
            2,
            0,
            1
         ]
      },
      "clientDetails":{
         "margin":[
            0,
            2,
            0,
            1
         ]
      },
      "tableHeader":{
         "bold":true
      },
      "costTableHeader":{
         "alignment":"right"
      },
      "qtyTableHeader":{
         "alignment":"right"
      },
      "lineTotalTableHeader":{
         "alignment":"right"
      },
      "invoiceLineItemsTable":{
         "margin":[
            0,
            16,
            0,
            16
         ]
      },
      "cost":{
         "alignment":"right"
      },
      "quantity":{
         "alignment":"right"
      },
      "tax":{
         "alignment":"right"
      },
      "lineTotal":{
         "alignment":"right"
      },
      "subtotals":{
         "alignment":"right"
      },
      "termsLabel":{
         "fontSize":0
      },
      "terms":{
         "margin":[
            0,
            20,
            0,
            0
         ],
         "fontSize":12
      },
      "fullheader":{
         "font":"$headerFont",
         "fontSize":"$fontSizeLargest",
         "bold":true
      },
      "subheader":{
         "font":"$headerFont",
         "fontSize":"$fontSizeLarger"
      },
      "help":{
         "fontSize":"$fontSizeSmaller",
         "color":"#737373"
      },
      "invoiceDocuments":{
         "margin":[
            7,
            0,
            7,
            0
         ]
      },
      "invoiceDocument":{
         "margin":[
            0,
            10,
            0,
            10
         ]
      },
      "notesAndTerms":{
         "margin":[
            0,
            0,
            0,
            0
         ]
      }
   },
   "pageMargins":[
      0,
      0,
      0,
      0
   ],
   "header":{

   },
   "background":{
      "image":"data:image/png;base64....large data uri string...",
      "width":595.28,
      "height":841.89
   }
}
6

Sorry, I’m not sure. It could be a bug with the library we’re using.

Does the background image show with a different design?

7

Hi, I have the same problem, the background display only on the first page. the base theme is “clean” and this is my background code:

[
  {
    "image": "$accountBackground",
    "alignment": "center",
    "fit": [
      596
    ],
    "margin": [
      0,
      130,
      0,
      0
    ]
  }
]
8

[SOLVED]
I moved the image code from the background tab to the Header tab (in my case) and I added the “absolutePosition” in all the texts that I need to be placed over the image.