I am seeking a solution to have the background extend to the bottom of the page, while accommodating both short and long pages.
<html>
<body>
<div id="container">Container of variable height</div>
</body>
</html>
css
body {
background: url("background.jpg");
}
#container {
margin: auto;
width: 800px;
}
This is the basic structure. The background functions correctly on long pages with scrolling capability, yet on shorter pages it stops just below #container.
If I include
html, body {
height: 100%;
}
The background extends to the bottom on short pages, but when scrolling on longer pages, it cuts off in the middle.
I attempted using
html, body {
min-height: 100%;
}
However, all browsers seem to ignore this solution.
What steps can I take to ensure the background works effectively for both long and short pages? Thank you!