Geek Answers Handbook

Dompdf: how to get a background image to be shown only on the first page

I use dompdf to generate letters that I want to use to advertise various brands of different companies. For this, I get a background image via css. See an example image below. Then I set the appropriate fields to match the content that I want to write to empty space. However, I just want this form to appear only on the first page. It is currently repeated on every page. My css looks like this:

<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 that the background image appears only on the output of the first page using dompdf?

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

+4
1

div, div , z-index, div, .
, PDF DOMPDF.
CSS A4 @150dpi.

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>
+3

More articles:


All Articles