I'm trying to keep the footer at the bottom of the page when scrolling down, but it seems to remain fixed in one position. I suspect it may be related to the backstretch plugin written in jQuery, here is my code:
<title>Atec Clima</title>
<script>
$.backstretch("img/bg.jpg",{speed: 500});
</script>
</head>
<body>
<div class="container">
<?php require("_header.php");?>
<div class="page">
<div class="riquadri">
<img src="img/home/riscaldamento.jpg" alt="riscaldamento" />
<p>
A well-maintained boiler consumes less... saves energy and lasts longer!!<br />
Regularly checked boilers provide safety for the user and the environment.
<title>Atec Clima</title>
<script>
$.backstretch("img/bg.jpg",{speed: 500});
</script>
</head>
<body>
<div class="container">
<?php require("_header.php");?>
<div class="page">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
body {
font-family: UbuntuRegular;
font-size: 62.8%;
width: 100%;
height: 100%;
background: #fff url(../img/bg.jpg) top center no-repeat;
}
.container {
width: 1000px;
height:100%;
margin: 0 auto -140px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
padding-bottom:140px;
}
.footer{
background:#1357c6;
position:absolute;
bottom:0;
width:100%;
height:140px;
}