Search code examples
htmlcsspositioncss-position

How to position a button centered on top of an image

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.

Solution

  • 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.