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

1 Answer 1


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
    Commented Jun 27, 2016 at 9:48
  • okie ! you mean after adding @top-center this is creating multiple headers ri8 ? Commented Jun 27, 2016 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
    Commented Jun 27, 2016 at 9:53
  • is there a way to reduce the size of the image inside the @top-center {} tag?
    – saint
    Commented Jun 27, 2016 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. Commented Jun 27, 2016 at 10:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .