Full background image that can scroll (initially fixed) - html

Question

I am trying to come up with a website of my own where I have a background image that covers the entire page when it loads initially. I want this to be responsive as well so that I can see the entire background image irrespective of screen size.
Here is the catch though, As I scroll the page I want the next div or element to be ready just below (on scrolling). The best reference i can think of right away would be fiftythree.com.

Answer 1

What you’re seeing on fiftythree.com is merely a div that has the size of the viewport height with a background-image set.
To make the image scale based on the screen size, set it to background-size: cover.
.hero {
background-color: salmon;
/* background-image: url(...); */
background-position: center;
background-size: cover;
color: #fff;
height: 100vh;
overflow: hidden;
}
.hero__title {
margin-top: calc(50vh - 2em);
text-align: center;
}
.wrapper {
padding: 1em;
}
<link href="https://necolas.github.io/normalize.css/3.0.2/normalize.css" rel="stylesheet"/>
<div class="hero">
<h1 class="hero__title">Look at this</h1>
</div>
<div class="wrapper">
<h2>Hello earthling</h2>
</div>

Answer 2

I have had the same question some time ago, I did fix it by using this tutorial:
http://responsivedesign.is/resources/javascript-jquery/back-stretch
Backstretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.
it is very easy to use and it does the job:)
CSS
#header{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Javascript
<script type="text/javascript">
$.backstretch("/path/to/image.jpg", {speed: 150});
// Perhaps you'd like to change the image on a button click
$(".button").click(function() {
$.backstretch("/path/to/next_image.jpg");
});
</script>
don't forget to copy this in the html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript" src="/jquery.backstretch.min.js"></script>;
anyway, check the link:)
edit: http://srobbin.com/jquery-plugins/backstretch/ even simpler