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!
If you want the image to stay in the same place no matter the scroll, you can use
on the element with the background, in this case
html
By the way, it is more common to attach backgrounds to
body
as opposed tohtml
. Also, include your relevant code in the question itself next timeEDIT
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 andwindow.innerheight
to make each section a page large and then useto 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