title: How to position text over an image with CSS
body: <p>How do I center a text over an image in css?</p>
  
  <pre><code>&lt;div class="image"&gt;
      &lt;img src="sample.png"/&gt;
      &lt;div class="text"&gt;
         &lt;h2&gt;Some text&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to do something like the one below but I'm having difficulties, here's my current css</p>
  
  <pre><code>&lt;style&gt;
  .image {
     position: relative;
  }
  
  h2 {
     position: absolute;
     top: 200px;
     left: 0;
     width: 100%;
     margin: 0 auto;
     width: 300px;
     height: 50px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/TWror.png" alt="enter image description here"></p>
  
  <p>When I use background-image I do not get any output from html2pdf:</p>
  
  <pre><code>&lt;style&gt;
  #image_container{
      width: 1000px;
      height: 700px;
      background-image:url('switch.png');
  }
  &lt;/style&gt;
  &lt;a href="prints.php"&gt;Print&lt;/a&gt;
  &lt;?php ob_start(); ?&gt;
  &lt;div id="image_container"&gt;&lt;/div&gt;
  &lt;?php 
  $_SESSION['sess'] = ob_get_contents(); 
  ob_flush();
  ?&gt;
  </code></pre>
  
  <p>Here's prints.php:</p>
  
  <pre><code>&lt;?php require_once('html2pdf/html2pdf.class.php'); ?&gt;
  &lt;?php
  $html2pdf = new HTML2PDF('L', 'A4', 'en');
  $html2pdf-&gt;writeHTML($_SESSION['sess']);
  $html2pdf-&gt;Output('random.pdf');
  ?&gt;
  </code></pre>