title: How to create responsive text on top of an image?
body: <p>I'm really not sure how to pose this question any other way, but I'm trying to load text on top of an image - which appears to be a tricky task in itself, but I've got it going using <a href="http://css-tricks.com/text-blocks-over-image/" rel="nofollow noreferrer">this</a> tutorial. Unfortunately, the tutorial is slightly out of date and I can't figure out a way to dynamically change both the font size and the span size for mobile and still maintain the text in the correct place on top of the image.</p>
  
  <p>When the window is resized the text and the box doesn't resize properly (it overflows outside of the image). </p>
  
  <p>I've tried percentage sizing as well as other techniques with little luck. The CSS I'm using to display the text over the image with a background can be seen below.</p>
  
  <p>What's the best practice for overlaying text on an image and how would one go about making it responsive? This is what I'm trying to use for desktop browsers right now:</p>
  
  <pre><code>.herotext span {
    position:     absolute;
    top:          80%;
    font-family:  'museo_slab500';
    font-size:    150%;
    color:        #fff;
    padding-left: 20px;
    width:        40%;
    line-height:  35px;
    background:   rgb(0, 0, 0);
    background:   rgba(0, 0, 0, 0.7);
  }
  </code></pre>
  
  <p>Does anyone have some advice on how to handle this properly these days? The article I mention above is from 2009 and I suspect it's not the best way to overlay text.</p>