How to position a button centered on top of an image

Question

I have been trying to make a simple site like this. The button never does show up as intended. I want #play_button to show up exactly on the play button image in the background. How can it 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);
}

Just one thing more, problem occurring is that if I resize 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 resize the browser window.As always, you can tweak the left and top offsets to get the desired results. Here's the code.

Effendi

Please post your HTML and whenever possible, a jsFiddle.net example as well. And asking for plugins, tutorials, and tools are off-topic for SO. – Bowhead

@Bowhead Ok, really sorry for going off-topic , I didn't knew that. As for the preview example I have a plunker example, but I will upload a jsfiddle also as you say.And adding the HTML code as well,just a minute. – Effendi

Use absolute positioning – Irtysh

If you have a solution that differs from the answers already provided, post an answer. Don't edit your question to contain the solution and slap SOLVED on it. Otherwise, accept one of the answers that's closest to the solution. – Burstone

@GaurangTandon, good to know you resolved it yourself, in that case please do provide a working solution and a demo for people visiting this page in the future. – Smart

@AnujKaithwas Ok , I am putting this up. – Effendi

Hmm ... I will do this tomorrow.A little busy now. – Effendi

@Burstone added. – Effendi

Answer 1

So, the trick here is to use absolute positioning calc like this:

top: calc(50% - XYpx);
left: calc(50% - XYpx);

where XYpx is half the size of your image, in my case, the image was a square. Of course, in this now obsolete case, the image must also change its size proportionally in response to window resize to be able to remain at the center without looking out of proportion.

Effendi

Answer 2

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/

Leastwise

Answer 3

I'd use absolute positioning:

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

}

Veilleux

Answer 4

It seems some what center of the screen. So I would like to do like this

body { 
     background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;    
     background-size:cover; 
     text-align: 0 auto; // Make the play button horizontal center
}

#play_button {
    position:absolute;  // absolutely positioned
    transition: .5s ease;
    top: 50%;  // Makes vertical center
} 

Campania

@Gaurang Tandon I would suggest you to check this jsfiddle.net/jZKyE/1 It would be better if you have some width and height so that you can get a better responsive. – Campania