title: Boostrap: How to "stick" a button over an image when re-sizing
body: <p>I have an image in which I need to put a button over, the problem is that I don't know how to place the button and automatically re-size and position it when making the browser smaller, right now I have the button in place, but when I re-size the browser to get smaller the button moves, I tried using percentages in the css buy doesn't work, what can I do?</p>
  
  <pre><code>&lt;div id="discover" class="container-fluid"&gt;
  &lt;div class="row-fluid"&gt; 
    &lt;div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg"&gt;
      &lt;img id="discoveryour" src="img/x.png" class="img-responsive"&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  &lt;div class="row-fluid"&gt; 
    &lt;div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12"&gt;
  &lt;form id="start" method="post" action="x.php"&gt;
  &lt;button class="btn-primary"&gt;text&lt;/button&gt;
  &lt;/form&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>  .withimg {
    width: 100%;
    overflow:hidden;
    padding: 0px;
    margin: 0px;
   }
  
    #discover{
    position: relative;  
   }
  
  #bttnimg{
  float: left;
  position: absolute;
  left: 62%;
  top: 25%;
  max-width: 750px;
  
   }
  </code></pre>