function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
GtennentGtennent 

Visualforce PDF background image sizing image

I'm trying to create a visualforce page rendered as a PDF so staff can easily print out or email specific documents that automatically tailor to the account. I want to put the documents on our letterhead but I'm having trouble getting it the proper size. I can set the background image of the page, but I can't seem to change its size. I've uploaded the image and style sheet as a static resource. The style is as follows. 
@Page{
     size: 8.5in 11in;     
     background-image:url('LetterheadJPG.jpg');
     background-size: 8.5in 11in;
}

No matter what I put in for background-size nothing changes. How can I get the background (letterhead) to fit to the size of the page? Also, if I use body{} instead of @page, the background doesn't load at all.

Is there a better way to input the letterhead into the document?
Ajay K DubediAjay K Dubedi
Hi Gtennent,

If you are looking to stretch the image to defined size dynamically, what you need to do is set background-size: 100% 100%, this will deform also your image if the defined size does not respect the image size. Let say that your image size is 320px x 170px and your div size is 400px x 400px, your image will resize to 400px being deformed. here is the code:
  
<div class=" darken " style="
                 background-image: URL(image url);
                 background-repeat: no-repeat !important; 
                 background-position: center center !important;
                 background-size: 100% 100% !important;
                 position: absolute !important;
                 width: 100%;
                 overflow: hidden;">
    
</div>

In the other hand, if you need to scale the image to be as large as possible so that the background area is completely covered, here is the code (This will crop the image):
  
<div class=" darken " style="
                 background-image: URL(image url);
                 background-repeat: no-repeat !important; 
                 background-position: center center !important;
                 background-size: cover !important;
                 position: absolute !important;
                 width: 100%;
                 overflow: hidden;">
    
</div>

But if that's not what your are looking for and you need to scale the image to the largest size such that both its width and its height can fit inside the content area covering the background with its large side (width or height), you may use this code:
  
<div class=" darken " style="
                 background-image: URL(image url);
                 background-repeat: no-repeat !important; 
                 background-position: center center !important;
                 background-size: contain !important;
                 position: absolute !important;
                 width: 100%;
                 overflow: hidden;">
    
</div>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi