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 CSS
field 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.