Help making image stick to bottom of browser

URL: http://tinyurl.com/6znmay8

I am trying to make the stone image stick to the bottom of the browser window no matter how much content is on the page. In the link above, you will see that it’s not at the bottom. But if you click on a longer page (Home or About), you’ll see that it is.

What would be the best way to accomplish this?

Hi,

I think this is what you are after.


html,body{height:100%}
body {
    background: #e2dfc3 url(http://auxanocreative.com/cla/wp-content/themes/cla/images/bg.png);
}

#wrap {
    background: url(http://auxanocreative.com/cla/wp-content/themes/cla/images/stones.png) fixed bottom center repeat-x;
    min-height:100%;
    padding:0;/* can't have vertical padding here - add padding-bottom to footer if you want extra space below footer*/
}
* html #wrap{height:100%}

Simple crossbrowser solution could be to use the backgrounds on the html respectively the body and move the scrollbars to the body filling the viewport. The difference I think is that both backgrounds would stay put when scrolling, as like “fixed”.

E.g:


html {
	background: #e2dfc3 url(images/bg.png);
	height: 100%;
	overflow: hidden;
}
html body {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: url(images/stones.png) bottom center repeat-x;
}

EDIT)
Beaten to the punch by Paul. :slight_smile:

Thanks to both of you! Paul, that’s perfect. Thank you!!