Question

I have the following html:

<div class="fix-to-top">
    <div class="background-image"></div>
</div>

I want to be able to fix the position of the image to the top of the page — so that it is always at the top of the page no matter how far down the user scrolls. In addition, I want the image to always stay in the center of the page, so if a user re-sizes his browser, the image stays in the center. Here is what I tried, but wasn’t getting the result:

.fix-to-top {
    position: fixed;
    top: 0px;
    width: 2000px;
}
.fix-to-top .background-image {
    margin: 0 auto;
}

However, the side margins aren’t doing ‘auto’. How would I correctly do this?

Answer 1

img {
    position: fixed;
    right: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-right: -50px;
    background: orange;
    top: 50%;
}​

http://jsfiddle.net/jXdxr/1/