[SalesForce] how to include image as header/logo in a visualforce pdf page

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">
    <html>
        <head>
            <style>
                @page {
                    size: A4;
                    margin-top: 20mm;
                    @bottom-center {
                        content: counter(page);
                        }
                    @top-right {
                        content: {!$Resource.TestProposalHeader};
                        }
                    @bottom{
                        margin-top: 10mm;
                    }
                    @left-top{
                        content: "Quote";
                    }
                }
                .contactDetails{
                }
                .page-break {
                    display:block;
                    page-break-after:always;
                }
                .outBorder {
                    border-style: groove;
                }
                .inBorder{
                    border-style: ridge;
                }
                .generatedDate{
                    font: 8px;
                }
                body{
                    font-size: 1em;
                }
            </style>
        </head>
        <body>
            <div class="generatedDate" style="float:right; position:relative;">
                <apex:outputText value="{0, date, MMMM d','  yyyy}" style="color:blue;">
                    <apex:param value="{!NOW()}"/>
                </apex:outputText>
                </div><br></br>
            <apex:image id="theImage" value="{!$Resource.spotQuoteBody}" width="700" height="200"/>
        </body>
    </div>
</html>

Any help is much appreciated. thanks

Best Answer

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>
  </div>

Thanx !!!

Related Topic