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);
}
Just one thing more, problem occurring is that if I re size the browser window , then the image moves to a new position.
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.
This question is related to
html
css
position
css-position
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.
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
}
I'd use absolute positioning:
#play_button {
position:absolute;
transition: .5s ease;
left: 202px;
top: 198px;
}
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%;
}
Source: Stackoverflow.com