3

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>
Improve this question

2 Answers 2

Reset to default
3

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;
          
        }
Improve this answer
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!

Improve this answer
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
    Commented Jul 29, 2020 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
    Commented Jul 29, 2020 at 10:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .