Boostrap: How to "stick" a button over an image when re-sizing
<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>