How to add a background image to the invoice PDF?
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:
-
Upload the image file as a static resource to Salesforce.
- Click to enter Setup, then navigate to Custom Code > Static Resources.
- Click New.
-
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. -
Click Save.
For details, see Defining Static Resources in the Salesforce Help.
-
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.
-
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 -
Add the CSS code as intended to your template.
- Open the template to be edited.
-
In the Layout & Design section, click next to the
Custom CSSfield and specify the CSS code as required, for examplebody { background-image: url("../resource/1421083611000/bg_image"); background-repeat: no-repeat; background-position: center; } -
Click Save.