title: Bootstrap Text over Image responsive
body: <p>I have this markup. I am driving crazy, I really don't know how to do it. I was trying with a wrapper and an overlay but does´t work. It have to be responsive, the image and the text too. Any help please. Thanks!
  <a href="https://i.stack.imgur.com/EYowf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EYowf.png" alt="enter image description here"></a></p>
  
  <p>Here is my markup and css:</p>
  
  <pre><code>&lt;div class="franja_blanca "&gt;
  &lt;div class="container"&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="header-img"&gt;
  &lt;img class="img-responsive" src="../header/818.png" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="overlay"&gt;
  &lt;div class="texto_naturopatia"&gt;
  Here is my text 1&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  .header-img{
      text-align:center;
      background-color:#fff;
      display:inline-block;
  }
  
  .header-img img {
   display:inline-block;
  }
  
  
  
  .wrapper {
      display: inline-block;
      position: relative;
  }
  
  
  .wrapper .overlay {
      color: #333333;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
  }
  
  .wrapper .overlay {
      color: #333333;
  }
  
  
  
  
  .franja_blanca {
      text-align:center;
      height: 100px;
      background-color:#fff;
  }
  </code></pre>