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

User · Answer

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

User · Answer

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

User · Answer

I d use absolute positioning        play button       position absolute  transition   5s ease      left  202px      top  198px

User · Answer

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

[html] How to position the Button exactly in CSS

Examples related to html

Examples related to css

Examples related to position

Examples related to css-position