Single page website with background image attached to bottom

Question

I have a long single page website here with 6 100% long pages. Until here we have no problem, the twist is, the page should scroll from bottom to top and the background image should me aligned to the bottom.

Here's what I have until now. I don't yet have the screen starting at the bottom. I'm trying to put the image at the bottom of the page. You can see by the example that the image sits at the bottom of the screeen, not the whole page.

html, body {
  height:100%;
}

body{
  background: url('http://i.minus.com/iB3a7BTVPi9X.jpg') center bottom no-repeat scroll;
}


.onepage {
  height:100%
}

I know this problem is occurring because I have an 100% height body and html, but if I change it to min-height, it doesn't work, for some weird reason.

Thanks!

Answer 1

If you want the image to stay in the same place no matter the scroll, you can use

background-attachment:fixed;

on the element with the background, in this case html

By the way, it is more common to attach backgrounds to body as opposed to html. Also, include your relevant code in the question itself next time

EDIT

If you want the background image of the body to the absolute bottom of the page you have to use a different approach. You cannot have give .onepage height:100% because that would total 600%, thus the body cannot fit it all. Instead you can use javascript and window.innerheight to make each section a page large and then use

html { min-height: 100%;height:auto; }
body {
  min-height: 100%; height:auto;
  background: url('http://i.minus.com/iB3a7BTVPi9X.jpg') no-repeat;
  background-position: center bottom;
} 

to position the background at the bottom of the page

Demo

P.S. You might be interested in something like One Page Scroll, a plugin that has a similar effect