xTODx, макет внизу это то что нужно было сделать вам, чтоб было понятно что и где не получается.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html, body{
height: 100%;
margin: 0px;
padding: 0px;
}
div{
background: 0px 0px ;
height: 100%;
width: calc(100%-12px);
border: rgb(102, 0, 255) 1px solid ;
background-size: cover;
}
div:nth-of-type(1) {
background-image: url(http://www.unitrade-bg.com/userfiles/image/alps/lake-mountain-the-alps_1600x1200_92573.jpg);
}
div:nth-of-type(2) {
background-image: url(http://cdn.dipity.com/uploads/events/0ff5b92dffa076352a2370a741f5e54f_1M.png);
}
div:nth-of-type(3) {
background-image: url(http://usiter.com/uploads/20101010/gory_priroda_9570.jpg);
}
div:nth-of-type(4) {
background-image: url(http://www.krasfun.ru/images/2014/2/f7561_original.jpg);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(window).scroll(function() {
var scrolling = $(window).scrollTop();
$(".paralax").each(function() {
if (scrolling > $(this).offset().top) {
var y = scrolling - $(this).offset().top;
$(this).css({
"backgroundPositionY": y + "px"
})
} else $(this).css({
"backgroundPositionY": "0px"
})
})
})
});
</script>
</head>
<body>
<div class="paralax"></div>
<div class="paralax"></div>
<div class="paralax"></div>
<div class="paralax"></div>
</body>
</html>