<p>Comment placer du texte sur une image en CSS ? </p> <pre class="brush:php;toolbar:false;"><div class="image"> <img src="sample.png"/> <div class="text"> <h2>Du texte</h2> </div> </div></pre> <p>Je veux faire quelque chose comme ci-dessous mais je suis bloqué, voici mon css</p> <pre class="brush:php;toolbar:false;"><style> .image { position : relative ; } h2 { position : absolue ; haut : 200 px ; gauche : 0 ; largeur : 100 % ; marge : 0 automatique ; largeur : 300 px ; hauteur : 50px ; } </style></pre> <p>Je n'obtiens aucun résultat de html2pdf lorsque j'utilise une image d'arrière-plan : </p> <pre class="brush:php;toolbar:false;"><style> #image_conteneur{ largeur : 1 000 px ; hauteur : 700px ; image d'arrière-plan:url('switch.png'); } </style> <a href="prints.php">Imprimer</a> <?php ob_start(); ?> <div id="image_container"></div> <?php $_SESSION['sess'] = ob_get_contents(); ob_flush(); ?>≪/pré> <p>Voici prints.php : </p> <pre class="brush:php;toolbar:false;"><?php require_once('html2pdf/html2pdf.class.php' ?> <?php $html2pdf = nouveau HTML2PDF('L', 'A4', 'en'); $html2pdf->writeHTML($_SESSION['sess']); $html2pdf->Sortie('random.pdf'); ?>≪/pré> <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>