2

When rendering Visualforce PDF, background size property isn't supported since this is CSS3: https://www.w3schools.com/cssref/css3_pr_background-size.asp

I'm trying to find a way to put a background image for a full size A4 with an image with this aspect ratio, when I try to do this with apex:image it applies a small border on the image, so I figured background image should work instead.

Is there a way to set background image so that it fits the page?

<html>
        <head>
            <style type="text/css">
                @page {
                    size: A4;
                    margin: 0;
                    background-image: url("{!$Resource.PDFBACKPAGE}");
                    position: absolute !important;
                }
            </style>
        </head>
        </html>
2

For anyone's facing the similar issue, using named pages and selectors, combined with background image solved the issue.

https://www.w3.org/TR/css-page-3/#using-named-pages

        @page last_page {
            background-image: url("{!$Resource.backgroundImage}");
            margin: 0 0 0 0;
          
        }

        .last_page{
            page: last_page;
          
        }
1

Not a full answer but a hint, the Visualforce to PDF Capabilities are very limited when it comes to CSS. There is barely any support for page attributes. I would try it with an img tag to solve it.

I hope this helps!

2
  • 1
    When done with image tag, it adds a border to the image when rendered as PDF, this only happens on render as PDF – Atlas Can Jul 29 '20 at 10:40
  • 1
    There was a border property if I remember right... but it's like 5 years ago I worked last with the Visualforce to PDF engine. – Nina Rosen Jul 29 '20 at 10:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.