title: overlaying text boxes on an image in specific positions
body: <p>I have a background image that I want to overlay on it a few box-messages on specific positions. Is there a way to stick the boxes to the image so that it scales with the image and keeps it's exact position ? it probably needs to scale the font-size of the text inside the box too. </p>
  
  <p>on another note, how can I change the background opacity without affecting the boxes on it. </p>
  
  <p>here is a link to jsfiddle: <a href="http://jsfiddle.net/zd3CA/">http://jsfiddle.net/zd3CA/</a></p>
  
  <p><strong>UPDATE</strong>
  I want the result to look like <a href="http://kpv.s3.amazonaws.com/static/img/film&amp;boxes.jpg">this</a> with boxes on specific parts of the path. When the image resizes my boxes go around. It seems like it wasn't clear.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.back {
      height: 85em;
      margin-bottom: 5em;
      background: url(http://kpv.s3.amazonaws.com/static/img/film.jpg) no-repeat;
      background-size: contain;
      color: #ffffff;
      text-shadow: 1px 1px 1px #000000;
  }
  .box-message {
      max-width: 15em;
      min-height: 10em;
      box-sizing: border-box;
      box-shadow: 1px 0 3px rgba(0, 0, 0, 0.11), -1px 0 3px rgba(0, 0, 0, 0.11);
      background: #fff;
      color:#000;
      padding: 25px 25px 35px 25px;
      position: relative;
  }
  .flow_three {
      margin-top: 3em;
      margin-left: 5em;
  }
  .flow_two {
      margin-top: 3em;
      margin-left: 10em;
  }
  .flow_text h3 {
      color: #1BB366;
      font-size: 20px;
  }
  .flow_text p {
      font-size: 18px;
      line-height: 25px;
  }
  .back .container {
      position: relative;
      z-index: 2;
  }
  .container {
      width: 940px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="back"&gt;
      &lt;div class="container"&gt;
          &lt;div class="box-message flow_text flow_three"&gt;
               &lt;h3&gt;text&lt;/h3&gt;
  
              &lt;p&gt;text txtegv dsf asd fsda f asdf f as df sadf .&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="box-message flow_text flow_two"&gt;
               &lt;h3&gt;text&lt;/h3&gt;
  
              &lt;p&gt;text txtegv dsf asd fsda f asdf f as df sadf .&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>