I have a visualforce PDF, and I have an image I have to use as background, it contains a logo and some visuals. That image is in A4 format, but when I add it to the page as background image, it works but the image is far larger than it should be. I want it to cover the whole page, but modifying the size of the image so it fits to the page, without overflowing because of its size. I added the background image like this:

     background-image:url('{!URLFOR($Resource.fondosPDF, 'fondo_presupuesto_atelier.jpg')}');

I don't know what is the CSS combination I have to use to have it sized according to the page size. I tried background-size, and even adding !important doesn't work. Any help is trully appreciated!!

EDIT: What I would really want to understand though, is why there is not a straight-forward way to set the background image to the size of the page. It should be easy, knowing that this is a common requirement. If there is, I couldn't find any post or information about it!

1 Answer 1


You could try something similar to this...

.the-image {
  background-image:url('{!URLFOR($Resource.fondosPDF, 'fondo_presupuesto_atelier.jpg')}');
  background-color: #cccccc;/* Used if the image is unavailable */
  height: 11in;/* You must set a specified height */
  width: 8.5in;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;/* Resize the background image to cover the entire container */
  position: relative;
  • What is the container in this case? I was setting the background with the @page selector. What container are you using there? A div inside the component? Sep 21, 2022 at 13:51
  • Te reason I'm asking is that I don't know if the container should be a div containing all the content of the page. Sep 21, 2022 at 14:09

You must log in to answer this question.

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