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
Salesforce 283Salesforce 283 

Show the header image in all pages in Visualforce PDF

Hi Guys,
I write one time apex:image it will show in all pages. So i used static resource but it didn't come and often i had to write apex:image. I tried whatever examples in google. So please try in your org and help me out this problem.

Static Resource:
<style type="text/css" media="print">
div.header {
position: running(header);
}
@page
{
margin-top: -0.2in;
margin-left:-0.1in;
margin-right:-0.1in;
@top-center
{ content: element(header);
background-image: url('{!$Resource.Con_Header}');
}
}
</style>
 
Best Answer chosen by Salesforce 283
logontokartiklogontokartik
I am not sure exactly what the issue is. Maybe the arranging of your css.

Your CSS can go into the head section of your Visualforce Page. something like below. Your Image can go into the static resource which you can refer in the @page
  
<apex:page showHeader="false" sidebar="false"  docType="html-5.0" applyBodyTag="false" applyHtmlTag="false" renderAs="pdf">
<html lang="en-us" dir="ltr">
	<head>
        <style>
            @page {
                @top-center {
                    content: "Sample Header Test";
                    background-image: url('{!$Resource.Con_Header}');
                }
                @bottom-center {
                    content: "Page " counter(page) " of " counter(pages);
                }
            }
        </style>
	    </head>
        <body>
        </body>
 </html>
</apex:page

Hope this helps.
 

All Answers

logontokartiklogontokartik
I am not sure exactly what the issue is. Maybe the arranging of your css.

Your CSS can go into the head section of your Visualforce Page. something like below. Your Image can go into the static resource which you can refer in the @page
  
<apex:page showHeader="false" sidebar="false"  docType="html-5.0" applyBodyTag="false" applyHtmlTag="false" renderAs="pdf">
<html lang="en-us" dir="ltr">
	<head>
        <style>
            @page {
                @top-center {
                    content: "Sample Header Test";
                    background-image: url('{!$Resource.Con_Header}');
                }
                @bottom-center {
                    content: "Page " counter(page) " of " counter(pages);
                }
            }
        </style>
	    </head>
        <body>
        </body>
 </html>
</apex:page

Hope this helps.
 
This was selected as the best answer
Salesforce 283Salesforce 283
Hi Karthik, It's working but image is not coming properly.
logontokartiklogontokartik
Not sure what you mean by not coming properly..
Salesforce 283Salesforce 283
Hi Karthik, Working fine. Have been searching from the last 3 days. Thanks a lot.
Manohar kumarManohar kumar
Hi Salesforce 283 and Karkit, image is not coming properly.. Its showing two times. And second one is cutting. I have used  @top-left
Any help will be apprecaited. 
Thanks,
Manoahr
jayasuriya janarthanjayasuriya janarthan
Image is not getting displayed?What should I need to do?