How to position the Button exactly in CSS

Question

I have been trying to make a simple site like this. However , I do now realize that I am bad at CSS Positioning for the button never does show up as intended.
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 ?

My CSS 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);
}

UPDATE:

Just one thing more, problem occurring is that if I re size the browser window , then the image moves to a new position.

UPDATE:

Problem solved :) Here, in this example, 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 left and top offsets to get the desired results. Here's the code.

Answer 1

Try using absolute positioning, rather than relative positioning

this should get you close - you can adjust by tweaking margins or top/left positions

#play_button {
    position:absolute;
    transition: .5s ease;
    top: 50%;
    left: 50%;
}

http://jsfiddle.net/rolfsf/9pNqS/

Answer 2

I'd use absolute positioning:

#play_button {
    position:absolute;
transition: .5s ease;
    left: 202px;
    top: 198px;

}