+ Start a Discussion
Mario Ruiz 646Mario Ruiz 646 

How to cover whole page in Visualforce PDF render?

I'm trying to show an image that covers the whole page of a visualforce page.

Tis like a whole page watermark.

I have only achieved to sow an image that respects some borders, not the whole page

<apex:page standardController="Opportunity" renderAs="advanced_pdf" applyBodyTag="false" standardStylesheets="false"  showHeader="false"  applyHtmlTag="false">
	<head>
        <style  type="text/css">
           
            
            .mark {
               	background: url({!$Resource.MarcaFL}) no-repeat;
               border: 2px solid black
           		font-family: "Arial Unicode MS", Tahoma,sans-serif;
            	font-size: 9pt;
            	width=50%;
            	height=50%;
            	position:relative;
            	background-size:contain;
            }
			div{
            	
           		font-family: "Arial Unicode MS", Tahoma,sans-serif;
            	font-size: 9pt;
            	width=100%;
            	position:relative;
            	text-align:left;
            }
            .right{
            	float:right;
            	
            	width: 50%;
            	border=1;
            }
            .left{
            	float:left;
            	
            	width: 50%;
            }
            .Left3{
            	
            }
            .Mid{
            
            
            }
            .Right3{
            
            }
            p{
            	font-size:20px;
            	color:#365f91;
            }
             .Equipo{
            	font-family: "Arial Unicode MS",Tahoma,sans-serif;
            	color:rgb(196,89,17);
            	font-size: 9pt;
            }
            .tabla{
            	font-family: "Arial Unicode MS",Tahoma,sans-serif;
            	font-size: 9pt;
            	color:rgb(0,0,0);
            }
            span{color:rgb(31,77,120);}
            b{font-weight:bold;}
            strong { font-weight: bold; }
           
            .T {font: bold 20px; color:black; }
        </style>
    </head>
	<body padding="20">
        <div >
           
            <img src="{!$Resource.MarcaFL}" style="position:absolute; width:100%; height:75%; opacity:.2;"/>
       	<div>
            <center>
        	<h1 style=" font: bold 2.5em 'Gotham Book', Arial, sans-serif;">
                
            
                                            Some stuff...
                 
                </h1>
        </center>
            </div>
</body>
</apex: page>
Best Answer chosen by Mario Ruiz 646
Ankit Solanki 6Ankit Solanki 6
HI Mario,

For vf page use like this:
<apex:page showHeader="false" applyHtmlTag="false" renderAs="pdf">
 <apex:stylesheet value="{!URLFOR($Resource.estilospdf,'bodyportada.css')}"/>   
    <body>
    </body>
</apex:page>
 And css like: 
/*bodyportada.css*/
body{
margin:0;
padding:0;
background-image:url(bigoportada.jpg);
background-repeat: no-repeat;
}

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Mario,

If I get your question correct you want to show the entire vfpage as a pdf in that case I was able to use your code with another static resource image and I was able to completely render the vf page with all the details you have mentioned. I am not sure if that is your requirement.

Aditionally I found the offical documentation to be useful please find the documention below:

>> https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_renderas.htm

Regards,
Anutej
Mario Ruiz 646Mario Ruiz 646

Thanks for replying, Anutej.

i want to format a vfpage to show like a PDF document, but the only problem i have is that i want this image: 

<img src="{!$Resource.MarcaFL}" style="position:absolute; width:100%; height:75%; opacity:.2;"/>


to cover a whole pdf page.

Thanks again, 

Mario

ANUTEJANUTEJ (Salesforce Developers) 
Hi Mario,

I was able to ge the image to be shown in the whole pdf document, please find the screenshot of how it is visible below:

User-added image
I believe it might be having something to do with the image can you try changing the image and check if the issue is still present?

Regards,
Anutej
Mario Ruiz 646Mario Ruiz 646

Thanks Anutej. 

The problem is: the image goes as far as some kind of margin in the pdf page, i want it to cover the whole page.

is there some way to override this?, maybe some CSS styling somewhere?.

 

Ankit Solanki 6Ankit Solanki 6
HI Mario,

For vf page use like this:
<apex:page showHeader="false" applyHtmlTag="false" renderAs="pdf">
 <apex:stylesheet value="{!URLFOR($Resource.estilospdf,'bodyportada.css')}"/>   
    <body>
    </body>
</apex:page>
 And css like: 
/*bodyportada.css*/
body{
margin:0;
padding:0;
background-image:url(bigoportada.jpg);
background-repeat: no-repeat;
}
This was selected as the best answer
Ankit Solanki 6Ankit Solanki 6
Hi @Mario Ruiz 646, if it's solved, will you marke as solved ?
Mario Ruiz 646Mario Ruiz 646
Ohh i totally forgot about margin, thanks !