Apex Code Development You need to sign in to do that
Don't have an account?
Mario 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>
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
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
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
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:
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
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?.
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;
}