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

Question

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.

Answer 1

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.

Answer 2

Old question but here is the best solution I came up with. Put the image in a container div, the div is positioned at the bottom of the screen and the image is centered inside of it. The div has a set width of 100% so the image can center properly. For the margin:auto; to work the image must be displayed as a table element with the display:table;

Using display:table; means you don't have to set a fixed width to the element that you want centered.

    <style>
    .sticky-image-wrapper{
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .sticky-image-wrapper img{
        display: table;
        position: relative;
        margin: auto;
   }
   </style>

    <div class="sticky-image-wrapper">
       <img src="myimage.jpg" />
    </di>

Answer 3

You should put it into a div and then, imagining your image is 500px wide:

div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}