title: Center Button Over Image in Responsive Div
body: <p>Div contains a background image - provided at runtime (so can't use img as background), on top of the image is a button. First approach was to use absolute positioning to place button above image. This works until the page is resized and the div resizes.</p>
  
  <p><a href="http://jsfiddle.net/ubWuX/330/" rel="nofollow">http://jsfiddle.net/ubWuX/330/</a></p>
  
  <p>First div is what I am going for, 2 and 3 show what happens after resize</p>
  
  <p>Also the div image is optional so if none is given, div should should have a bg-color</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#img_container {
      position:relative;
      display:inline-block;
      text-align:center;
      border:1px solid red;
      background-color:gray;
  }
  
  .button {
      position:absolute;
      bottom:78px;
      right:40px;
      width:100px;
      height:30px;
  }
  .resize {
      width:300px;
      height:200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="img_container"&gt;
      &lt;img src="http://jsfiddle.net/img/initializing.png"/&gt;
       &lt;button class="button"&gt; click here &lt;/button&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="resize" id="img_container"&gt;
      &lt;img src="http://jsfiddle.net/img/initializing.png"/&gt;
      &lt;button class="button"&gt; click here &lt;/button&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="resize" id="img_container"&gt;
      &lt;button class="button"&gt; click here &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>