title: mPDF: use background image for full page
body: <p>I need to generate invoices with mPDF, and they all will have a header, a footer, and the same background image which has to cover the whole page.</p>
  
  <p>I've seen other solutions on the net but none worked for me.</p>
  
  <p>These are several attempts, all of them lead to failure (image not being displayed, 50* error or image covering part of the content when using images):</p>
  
  <p><strong>1- Using external CSS file and injecting it as CSS content</strong></p>
  
  <pre><code>$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');
  
  $pdf-&gt;useSubstitutions=false;
  $pdf-&gt;setAutoTopMargin = 'stretch';
  $pdf-&gt;SetDisplayMode('fullpage');
  
  
  $css = file_get_contents('./styles.css');
  $cabecera = file_get_contents('./header.html');
  $cuerpo = file_get_contents('./body.html');
  $pie = file_get_contents('./footer.html');
  
  $pdf-&gt;SetHTMLHeader($cabecera);
  $pdf-&gt;SetHTMLFooter($pie);
  $pdf-&gt;WriteHTML($css, 1);
  
  $pdf-&gt;WriteHTML($cuerpo, 2);
  
  $pdf-&gt;Output();
  </code></pre>
  
  <p>And the styles.css file:</p>
  
  <pre><code>body {
      background-image: url('background_300dpi.png') ;
  }
  </code></pre>
  
  <p>This throws a timeout error.
  If I use a low resolution image background, it works, but it breaks my layout.</p>
  
  <p><strong>2- Trying to set the background image with SetDefaultBodyCSS</strong></p>
  
  <pre><code>$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');
  
  $pdf-&gt;useSubstitutions=false;
  $pdf-&gt;setAutoTopMargin = 'stretch';
  $pdf-&gt;SetDisplayMode('fullpage');
  
  
  $cabecera = file_get_contents('./cabecera.html');
  $cuerpo = file_get_contents('./cuerpo.html');
  $pie = file_get_contents('./pie.html');
  
  $pdf-&gt;SetHTMLHeader($cabecera);
  $pdf-&gt;SetHTMLFooter($pie);
  
  $pdf-&gt;SetDefaultBodyCSS('background', "url('background_300dpi.png')");
  $pdf-&gt;SetDefaultBodyCSS('background-image-resize', 6);
  
  $pdf-&gt;WriteHTML($cuerpo, 2);
  
  $pdf-&gt;Output();
  </code></pre>
  
  <p>Timeout error too. 
  It does work if I use a low resolution image. But this is not a good solution to print, because there are small letters in the letterhead which is included in the background image.</p>
  
  <p><strong>3 - Trying to use images (the background image is split into a top letterhead and a bottom image) instead of an only background image, and setting margin constraints to false</strong></p>
  
  <pre><code>$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');
  
  $pdf-&gt;useSubstitutions=false;
  $pdf-&gt;setAutoTopMargin = 'stretch';
  $pdf-&gt;SetDisplayMode('fullpage');
  
  
  $cabecera = file_get_contents('./cabecera.html');
  $cuerpo = file_get_contents('./cuerpo.html');
  $pie = file_get_contents('./pie.html');
  
  $pdf-&gt;SetHTMLHeader($cabecera);
  $pdf-&gt;SetHTMLFooter($pie);
  
  $pdf-&gt;WriteHTML($cuerpo, 2);
  
  $pdf-&gt;Image('miramar/background_top.png', 0, 0, 210, 28.5, 'png', '', true, false);
  $pdf-&gt;Image('miramar/background_bottom.png', 0, 259, 210, 38, 'png', '', true, false, false, false);
  
  $pdf-&gt;Output();
  </code></pre>
  
  <p>There's no timeout in this case, but the footer image makes that some content included in the footer is gone.</p>
  
  <p>Anyone has an idea on how to achieve it?</p>
  
  <p>Another question: does mPDF support <strong>vector images</strong> for backgrounds? I might use the background image as an SVG file.</p>