title: How to position the Button exactly in CSS
body: <p>I have been trying to make a simple site like <a href="http://plnkr.co/edit/cbvtQXn7ZHocjUbMauFr" rel="noreferrer">this</a>. However , I do now realize that I am bad at CSS Positioning for the button never does show up as intended.<br>
  As you might have guessed , I want the button (#play_button) to show up exactly on the play button image in the background. Can someone please tell me how it's to be done ?</p>
  
  <p>My CSS code:</p>
  
  <pre><code>body { 
       background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;    
       background-size:cover;  /*For covering full page*/
  }
  
  #play_button {
      position:relative;
      transition: .5s ease;
      top: 191px;
      left: 420px;
      right: -420px;
      bottom: -191px;
  }
  #play_button:hover { 
      -webkit-transform: scale(1.05);/*Grows in size like Angry Birds button*/
      -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
      -o-transform: scale(1.05);
  }
  </code></pre>
  
  <h2>UPDATE:</h2>
  
  <p>Just one thing more,  problem occurring is that if I re size the browser window , then the image moves to a new position.</p>
  
  <h2>UPDATE:</h2>
  
  <p>Problem solved :) <a href="http://jsfiddle.net/PZYB6/1/embedded/result/" rel="noreferrer">Here, in this example</a>, you can see how the button remains in the center of the page even if you re size the browser window.As always , you can tweak the <code>left</code> and <code>top</code> offsets to get the desired results. <a href="http://jsfiddle.net/PZYB6/1/" rel="noreferrer">Here's the code</a>.</p>