title: Responsive Text overlay on top of image
body: <p>If i have a image that let's say have a chat dialogue .</p>
  
  <p>I want to overlay a div on top of the text, then i want put some text on the div.</p>
  
  <p>When I rescale the browser smaller, the text should become smaller, but position remain same. vice versa the text become bigger when browser rescale bigger.</p>
  
  <p>The div will likely be a background color and should also rescale just like the text.</p>
  
  <p>I tried with </p>
  
  <pre><code>.herotext span {
      position: absolute;
      bottom: 20px;
      font-family: 'museo_slab500';
      font-size: 150%;
      color: #fff;
      padding: 0 20px;
      width: 40%;
      line-height: 150%;
      background: rgb(0, 0, 0);
      background: rgba(0, 0, 0, 0.7);
  }
  </code></pre>
  
  <p>But even though my text rescale when I rescale my browser, but my div which is white background doesn't rescale properly, and when browser turn smaller, the div doesn't rescale.</p>
  
  <p>Any solution or idea for this implementation?</p>