Is it possible to position a background image at the bottom of the window without extra elements or min-height?
I'm trying to have an image at the bottom of the window, not the body, no matter how short the webpage is.
What I mean is that if a page is longer than the vertical screen resolution, the browser allows you to scroll to the bottom and the image would be at the bottom (footer background).
If the page is very short, maybe half the height of the screen, the footer background will "hang" in mid air. I'm trying to have it so it stays at the bottom of the window.
I've tried min-height, but that requires you to set a big enough height to cover the largest resolution that people who visit your site might have in turn creating large empty areas which are still there if you resize down your browser (or if people have smaller screens).
I tried setting the footer background onto the body element, but it hangs. Setting the footer background onto the html element just gave me a white area at the bottom, so I used it for my header background instead.
The basic layout of my website is:
<html>
<body>
<div id="header">other elements and header stuff</div>
<div id="main">main content</div>
<div id="footer">other elements and footer stuff</div>
</body>
</html>
I'd do it like so...
html {
min-height: 100%;
}
body {
background: url(path/to/image.png) no-repeat center bottom;
}