title: Center an button with respect to an image CSS
body: <p>I need a page where centered in the middle there is an image and inside of it there is button. What I am not able to achieve is to force the button to remain in the same position when the browser window is re-sized. 
  This is the page:
  <a href="http://jsfiddle.net/afg5wrLz/" rel="nofollow">http://jsfiddle.net/afg5wrLz/</a></p>
  
  <p>The HTML code:</p>
  
  <pre><code>&lt;div id="MyImage"&gt;
      &lt;img id="theImage" src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg"&gt;
      &lt;button id="myButton"&gt;Start Here&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#MyImage{
      position: relative;
  }
  
  #theImage{
     position: relative;
     margin-left: auto;
     margin-right: auto;
     margin-top: 20px;
     display: block;    
     width: auto;
     height: auto;
     max-width: 400px;
  }
  #myButton{
     position: absolute;
     left: 0px;
     top: 0px;
  }
  </code></pre>
  
  <p>Now if you re-size the window you will see the problem; the left coordinate of the button is related to the window and not to the image so when you re-size the window the button moves while I want it to remain in the same position in the image.
  To have a better idea of what I need head to <a href="http://www.whatsapp.com/" rel="nofollow">http://www.whatsapp.com/</a> and look at the behavior of the Download WhatsApp button or the text "Simple. Personal ..." if you re-size the window you will see they remain in the same position with respect to their background image which remains centered in the screen as the width changes. 
  I would like to know what I need to change in my code to achieve that result</p>