I am trying to build a pdf page where the header/logo includes an image. I have tried the following but no luck yet:

    <apex:page standardController="proposal__c" extensions="testGenerateQuotePdf" showHeader="false" renderAs="pdf" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">
                @page {
                    size: A4;
                    margin-top: 20mm;
                    @bottom-center {
                        content: counter(page);
                    @top-right {
                        content: {!$Resource.TestProposalHeader};
                        margin-top: 10mm;
                        content: "Quote";
                .page-break {
                .outBorder {
                    border-style: groove;
                    border-style: ridge;
                    font: 8px;
                    font-size: 1em;
            <div class="generatedDate" style="float:right; position:relative;">
                <apex:outputText value="{0, date, MMMM d','  yyyy}" style="color:blue;">
                    <apex:param value="{!NOW()}"/>
            <apex:image id="theImage" value="{!$Resource.spotQuoteBody}" width="700" height="200"/>

Any help is much appreciated. thanks


have u tried with @top-center ? like :

@top-center {
    content: "Sample Header Test";
    background-image: url('{!$Resource.YOUR_IMAGE}');  

You can use other way for reducing image size like :

@page {
      margin-top: 1.5in;
      @top-center {
        content: element(header);
    div.header {
      position: running(header);
 <div class="header">
    <center><img src="{!$Resource.YOUR_IMAGE}" width="25%"/></center>

Thanx !!!

  • thx but this creates multiple headers for some reason..
    – saint
    Jun 27 '16 at 9:48
  • okie ! you mean after adding @top-center this is creating multiple headers ri8 ? Jun 27 '16 at 9:50
  • Yes. the header should only show SNV but shows SNV SNV SNV SNV SNV on all the headers of all pages. not quite sure why?
    – saint
    Jun 27 '16 at 9:53
  • is there a way to reduce the size of the image inside the @top-center {} tag?
    – saint
    Jun 27 '16 at 9:59
  • include this 2 tags in apex:page <apex:page standardController="proposal__c" extensions="testGenerateQuotePdf" renderAs="pdf" applyBodyTag="false"> and remove all other tags from apex:page. Jun 27 '16 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.