[SalesForce] Header Image in Visualforce PDF

I am looking to embed an image in a PDF rendered in Visualforce. The goal is to have the PDF look like it's on a letter head. I've tried a number of different approaches to this but can't seem to find the right way to do it that properly renders the image.

My current code for the header is as follows:

    <apex:page standardController="Opportunity" renderAs="pdf" applyBodyTag="false" standardStylesheets="false">

    <head>
        <style>
            body { font-family: 'Arial Unicode MS'; padding: 0px;}
            .companyName { font: bold 25px; color: #505053; }
            footer {font: normal; font-size: 12px; color: #505053; }
            h1 {font: normal; font-size: 30px; color: #505053;}
            h2 {font: normal; font-size: 25px; color: #5F5F62;}
            .colstyle {width: 75%}
            .colstyle2 {width: 25%}
            .footer {padding: 0px;position:fixed;bottom:5px; width: 100%}
            .header {position: running(header);background-image: url("{!$Resource.PDF_Header}"); background-position: center top; background-repeat: no-repeat; padding: 0px; width:100%;}
            .line {color: #E72683;}
            .footerline {color: black;}
            disclaimer {font-style: italic; font-size: 12px; color: #505053; }
            @Page{
              size: 8.50in 11.00in;
              margin-top: 0in;
             @top-left{
               content: element(header);
               }
             #header{
              padding: 0px;
              position: running(header);
              background-color: blue;
             }
        </style>
    </head>

 <body> 
     <div>
       <apex:image id="header" value="{!$Resource.PDF_Header}" height="150" width="100%" style="vertical-align:left" />
       <center>
        <h1> Integrated Payment Solution </h1>
        <h2> Savings Estimate </h2> 
       </center>
     </div>

<!-- ... Rest of PDF... -->

As you can see by my styling, I've tried a few different approaches and am currently using the apex:image function to at least get the image rendered. However, with this approach, it's not a true header but rather rendered in the first line of the PDF.

Any guidance is appreciated!

Best Answer

Was able to successfully render an image in the header with the following:

  <apex:page standardController="Opportunity" renderAs="pdf" applyBodyTag="false" standardStylesheets="false">

    <head>
        <style type="text/css" media="print">
             @page {
                     margin-bottom: 1in;
                     margin-top: 1in;
                      @top-center {
                          content: element(header);
                          }
                      @bottom-left {
                          content: element(footer);
                           }
                    }
                      div.header {
                        padding: 0px;
                        position: running(header);
                        background-color: #f1f3f2;
                        }
                      div.footer {
                        display: block;
                        position: running(footer);
                        }

            body { font-family: 'Arial Unicode MS'; padding: 0px;}
            .companyName { font: bold 25px; color: #505053; }
            footer {font: normal; font-size: 12px; color: #505053; }
            h1 {font: normal; font-size: 30px; color: #505053;}
            h2 {font: normal; font-size: 25px; color: #5F5F62;}
            .colstyle {width: 75%}
            .colstyle2 {width: 25%}
            .line {color: #E72683;}
            .footerline {color: black;}
            disclaimer {font-style: italic; font-size: 12px; color: #505053; }
        </style>
    </head>

 <div class="header">
 <img src="{!$Resource.PDF_Header}" width="300" height="100"/>
 </div> 

 <body>

<!-- rest of pdf code-->
Related Topic