title: Place div elements on responsive background with defined "workspace" area (Bootstrap 3)
body: <p>I am relatively new to responsive design.  My client provided an image to use for the background of a web app.  It has some flare and a rectangular area that is used for the "workspace" of the web app.  I have made this background image responsive.  What I want to do is make a workspace div that will scale with the background image and maintain position over the provided workspace area on the image.  Please see the following question for a good visual example of this functionality.</p>
  
  <p><a href="https://stackoverflow.com/questions/23714126/place-div-elements-on-responsive-background-bootstrap-3">Place div elements on responsive background (Bootstrap 3)</a></p>
  
  <p>My background image is similar to the envelope in the example above but is not diagonally positioned.  So that removes a bit of complexity.  I have tried with 12 columns and couldn't get the overlayPane to position properly.  Any tips are greatly appreciated.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    html, body
      {
          min-height: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
      }
  
      .bg_img
      {
          background: url('../Images/BACKGROUND.jpg') no-repeat center top fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          min-height: 100%;
      }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="mainDiv" class="bg_img" style="height: 100%;"&gt;
          &lt;div id="overlayPane"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>