Search code examples
csscentersticky

How do I stick an image to the bottom of the visible screen, and be centered?

I have a website, and I need to have an image centered at the bottom of the visible page. So in any screen size, the image will still be at the bottom, and centered.

Solution

  • using pure css you can achieve this in all new browsers

    .fix{
    position:fixed;
    bottom:0px;
    left:50%;
}
<img src="yourimagepath" class="fix"/>

    and for IE6 you can use position:absolute; instead of fixed. This positions the image on the bottom of the page but, as you scroll up, the image will scroll with the page. Unfortunately position:fixed in not supported in IE6.