action.skip

How to add a background image to the invoice PDF?

← PDF and Email FAQ

Certain business cases may require to include a background image in the invoice PDF.

The easiest way to do so is using the CSS background-image property. However, this requires the image to be available as a static resource via its URL.

So, adding a background image to your PDF involves the following tasks:

  1. Upload the image file as a static resource to Salesforce.

    1. Click to enter Setup, then navigate to Custom Code > Static Resources.
    2. Click New.
    3. Upload the image file and specify the details as required.

      The specified name (like, for example, bg_image) will be used to identify the image.

    4. Click Save.

    For details, see Defining Static Resources in the Salesforce Help.

  2. Retrieve the timestamp of your uploaded image.

    In the Execute Anonymous Apex tool of the Developer Console, execute the following code, replacing <name> with the actual resource name specified before:

    StaticResource res = [SELECT Id, Name, SystemModstamp FROM StaticResource WHERE Name = '<name>' LIMIT 1]; System.assert(false, res.SystemModstamp.getTime());
    

    This produces the timestamp, a (13-digit) number, which will be part of the resource URL.

  3. Assemble the resource URL.

    The URL of the resource is relative to your org domain and composed as follows:

    ../resource/ + <timestamp>/ + <name>

    for example, ../resource/1421083611000/bg_image

  4. Add the CSS code as intended to your template.

    1. Open the template to be edited.
    2. In the Layout & Design section, click next to the Custom CSS field and specify the CSS code as required, for example

      body {
          background-image: url("../resource/1421083611000/bg_image");
          background-repeat: no-repeat;
          background-position: center;
      }
      
    3. Click Save.