<p>Wie platziere ich in CSS Text über einem Bild? </p> <pre class="brush:php;toolbar:false;"><div class="image"> <img src="sample.png"/> <div class="text"> <h2>Einige Texte</h2> </div> </div></pre> <p>Ich möchte so etwas wie das Folgende machen, aber ich stecke nicht fest. Hier ist mein aktuelles CSS</p> <pre class="brush:php;toolbar:false;"><style> .Bild { Position: relativ; } h2 { Position: absolut; oben: 200px; links: 0; Breite: 100 %; Rand: 0 automatisch; Breite: 300px; Höhe: 50px; } </style></pre> <p>Ich erhalte keine Ausgabe von html2pdf, wenn ich ein Hintergrundbild verwende: </p> <pre class="brush:php;toolbar:false;"><style> #image_container{ Breite: 1000px; Höhe: 700px; Hintergrundbild:url('switch.png'); } </style> <a href="prints.php">Drucken</a> <?php ob_start(); ?> <div id="image_container"></div> <?php $_SESSION['sess'] = ob_get_contents(); ob_flush(); ?></pre> <p>Das ist prints.php:</p> <pre class="brush:php;toolbar:false;"><?php require_once('html2pdf/html2pdf.class.php'); <?php $html2pdf = new HTML2PDF('L', 'A4', 'en'); $html2pdf->writeHTML($_SESSION['sess']); $html2pdf->Output('random.pdf'); ?></pre> <p><br /></p>

<div class="containerBox">
    <div class="text-box">
        <h4>Your Text is responsive and centered</h4>
    </div>
    <img class="img-responsive" src="http://placehold.it/900x100"/>
</div>

.containerBox {
   position: relative;
   display: inline-block;
}
.text-box {
   position: absolute;
   height: 100%;
   text-align: center;    
   width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h4 {
   display: inline-block;
   font-size: 20px; /*or whatever you want*/
   color: #FFF;   
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>