Dompdf: how to get background image to show on first page only


Tags: php,html,css,dompdf

Problem :

I am using dompdf to generate letters which I want to brand with various different companies branded paper. To do this I'm getting a background image via css. See example image at bottom. I then set appropriate margins to fit the content I want to write out into the white space. However I just want this letterhead to display on the first page only. At present it is repeating onto each page. My css looks like:

<html>
  <head>
    <meta charset="utf-8">
    <title>{$pdf.title}</title>
<style type="text/css">
  @page {
    size: A4;
    margin:0;
    padding: 0;
  }
  body {
    padding: {$branding.page_margin_top}cm {$branding.page_margin_right}cm {$branding.page_margin_bottom}cm {$branding.page_margin_left}cm;
    font-size: 7pt;
    font-family: helvetica !important;
    background-image: url('{$base_url}pd-direct.png');
    background-position: center center;
    background-repeat: no-repeat;
    font-size: 10pt;
  }
  #postal-address {
      margin: 0cm;
      margin-left: {$branding.address_offset_left}cm;
      margin-top: {$branding.address_offset_top}cm;
      margin-bottom: {$branding.address_offset_bottom}cm;
      font-size: 10pt;
  }
  #date {
    font-weight: bold;
  }
</style>
  </head>

  <body>

    <div id="page-body">

      <div id="content">

        {if $pdf.postal_address}
        <div id="postal-address">
          {$pdf.postal_address|nl2br}
        </div>
        {/if}

        {$pdf.main_body}

      </div>

    </div>
  </body>
</html>

How can I change this so the background image is only displayed on the first page output by dompdf?

See current html being rendered at: http://eclecticgeek.com/dompdf/debug.php?identifier=ccfb2785f8a8ba3e1e459cbd283ad015



Solution :

You can put the letterhead as the background image in an div that overlaps the main content div and use z-index to organise the stacking order of the divs, so that background image will appears at the back.
This way, the background image will only show on the first page when you convert it to PDF using DOMPDF.
The CSS below works for A4@150dpi.

Here is how it renders using example your provided.

CSS

@page {
    size: A4;
    margin-top:0.5cm;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    padding: 0;
  }
  body {
    font-family: helvetica !important;
    font-size: 10pt;
    position: relative;
  }
  #overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('http://www.showhousesoftware.com/pd-direct.png');
    background-position: center top;
    background-repeat: no-repeat;
    z-index: -1;
}
  #content{
    padding: 3.5cm 0.50cm 5.00cm 0.50cm;
  }
  #postal-address {
      margin: 0cm;
      margin-left: 1.50cm;
      margin-top: 0.00cm;
      margin-bottom: 1.00cm;
      font-size: 10pt;
  }
  #date {
    font-weight: bold;
  }

HTML

<body>
<div id="page-body">
<div id="overlay">
</div>
<div id="content">
......

</div>
</div>
</body>

    CSS Howto..

    how to change a css of an input if the value of it is not empty in angularJS

    How to select nth line of text (CSS/JS)

    How to remove “padding” from ionic card

    How do I align columns in the center of the page? [duplicate]

    How to auto-resize tabs to fit a fixed-width container?

    How to keep two divs and images inside them to be side by side on browser resize?

    How to override the default css class using c#

    CSS - How to align 2 fields into 1 row?

    How to use vertical align in bootstrap

    How to change Image inside of CSS of a usercontrol

    How to inherit from ancestor and not parent in CSS?

    How to make AngularJS Materials drop down menues more visable?

    How to access element inside div in jquery and make exanding div transparent

    How can I create a searchbar like this?

    How to add to css class in a single html tag? [duplicate]

    How to view CSS/HTML in GUI?

    How can i center the list items inside my unordered list?

    How to get the exact RGBa value set through CSS via Javascript?

    How can I write CSS that only applies to specific browsers?

    How to show hidden div in the same line as the paragraph text?

    How would I achieve this CSS effect (centering content and padding)?

    HTML/CSS: How to move my navigation bar to the middle?

    How to make the contents of a div not wrap?

    how to print no blur content over a blurred div

    How to scale a website for mobile devices?

    How to set bold only to first level list elements? [duplicate]

    How to change decoration of a local HTML file to show it on the WebView in Android

    how to use pseudo-classes (like after, before) inline in CSS

    How to create a CSS3 animation that resembles an image fill up effect?

    How to write CSS to convert div elements into a 3 or 4 column table?