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

css center sticky
Shawn picture Shawn · Apr 3, 2010 · Viewed 67.9k times · Source

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

Pankaj Kumar picture Pankaj Kumar · Apr 3, 2010

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.

Related questions

How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More
How can I center an absolutely positioned element in a div?

I need to place a div (with position:absolute;) element in the center of my window. But I am having problems doing so, because the width is unknown. I tried this. But it needs to be adjusted as the width …

Read More
How do I center floated elements?

I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by …

Read More