Skip to content

Instantly share code, notes, and snippets.

@the-last-byte

the-last-byte/backgroundImagePdf.page

Last active February 25, 2024 22:33
Show Gist options
  • Save the-last-byte/13a98d2b99c8bbc1e5f0db6fb97c218e to your computer and use it in GitHub Desktop.
Save the-last-byte/13a98d2b99c8bbc1e5f0db6fb97c218e to your computer and use it in GitHub Desktop.
Download ZIP
VisualForce PDF with Background Images
Raw
backgroundImagePdf.page
<apex:page renderAs="advanced_pdf"
applyBodyTag="false"
standardStylesheets="false"
showHeader="false"
sideBar="false"
showChat="false"
applyHtmlTag="false">
<html lang="en">
<head>
<title>SOME TITLE</title>
<style type="text/css" media="print">
@page {
/* Set your page size */
size: A4 portrait;
/* Position the background in the top left corner of every page */
@top-left-corner {
content: element(background_image);
}
}
/* Style the background image. Here is is matching the size of the A4 page */
/* Note that the position running is essential */
div.background_image {
position: running(background_image);
display: block;
top: 0;
left: 0;
width: 21cm;
height: 29.7cm;
}
/* Here the background is being set to fill each page. Place any content */
/* within this style and the parent html div to meet your requirements. */
div.background_image img {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- This is the background image - pulled from a static resource -->
<div class="background_image">
<apex:image value="{!URLFOR($Resource.Public_Images, 'Letter_background.jpg')}">
</apex:image>
</div>
<!-- Add your content here -->
</body>
</html>
</apex:page>
@the-last-byte
Copy link
Author

Steps are as follows:

  1. Create a static resource containing the background image you need.
  2. Decide you page size. Here I'm using A4 - which is 21x29.7cm. You need both the page size and that measurement to ensure the background and the page match.
  3. Create a VisualForce page as follows (see comments in code):

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment