How do these background images stay fixed like this? - html

Question

I wasn't quite sure what to call this question so hopefully that title is correct.
I'm going to be working on this website for a new client and they said that they wanted something similar to what this website is doing (http://www.buzzardfilm.com).
You'll see right on the index page if you scroll down it has this kind of 'smooth animation' and the new block starts to slide up into the background image?
This is what I'm talking about:
http://gyazo.com/8cafbab233930bd478723b48c5912263
My question is, how is this usually achieved? Is this just an image with some text on top or is this maybe a background image? What kind of rules would I need in place to get this?

Answer 1

You can do it with css see this example
body{
margin:0;
padding:0;
}
.one{
background-image:url('https://placekitten.com/g/1200/800');
height:500px;
background-size:cover;
background-position:static;
position: static;
background-position: inherit;
background-attachment: fixed;
}
.two{
height:500px;
}
<div class="one"></div>
<div class="two">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula sem mi, at faucibus ex consequat eu. Suspendisse bibendum nulla id nisl pulvinar, a lacinia nisi imperdiet. Nam eget mi congue, lacinia augue dictum, ullamcorper ex. Donec condimentum dolor nisl, eu tincidunt lacus congue et. Duis eu libero id nunc facilisis viverra a id velit. Suspendisse potenti. Fusce in nisi eu est consectetur fringilla vitae non nunc. Cras neque elit, pharetra at ipsum at, semper laoreet eros. Nunc eu dolor blandit, varius felis vel, congue turpis. Vestibulum ullamcorper leo odio, in mattis ante pretium nec. Ut sagittis luctus lacinia. Donec vehicula ullamcorper lectus, eget pretium nisi laoreet id. Cras id laoreet nunc, ac molestie lectus. Phasellus suscipit, risus eget fringilla posuere, urna eros venenatis ante, vel finibus lorem arcu a massa. Etiam at ante massa.
</p>
<p>
Ut tempor fermentum dui sed placerat. In commodo velit at augue luctus bibendum. Aliquam ullamcorper tincidunt posuere. Sed congue sagittis est ac viverra. Cras eget lobortis leo. Donec rutrum elit purus, et sollicitudin lacus pulvinar eu. Maecenas sit amet metus nisi. Proin porta diam et rhoncus mollis. Quisque arcu leo, sagittis a iaculis gravida, pulvinar ac risus. Etiam lacinia urna nunc, eu tincidunt massa finibus id. Aliquam posuere, est at mollis rhoncus, libero neque varius dui, vel facilisis odio dolor non ante. Nullam tempor ligula non pellentesque aliquet. Donec rutrum est ac nisi tempus dapibus. Sed vel est eget nisi bibendum dapibus. In consectetur leo volutpat, pharetra dui in, consequat magna.
</p>
<p>
Ut luctus vel dolor vel laoreet. Nullam sit amet eleifend dui. Suspendisse potenti. Fusce eleifend, erat sit amet rutrum convallis, diam purus accumsan neque, vel dignissim ante erat ut neque. Cras sed nunc vitae libero fermentum porta. Pellentesque sodales odio et mi pharetra, non hendrerit eros auctor. Morbi quis erat et enim tempus tempus eget mattis nibh.
<p>
Morbi sed risus egestas, facilisis lectus sit amet, ullamcorper lectus. Duis pellentesque dictum lobortis. Morbi ullamcorper et ipsum id vehicula. In consequat mi eu faucibus hendrerit. Cras finibus dapibus elit, vel venenatis mauris convallis eleifend. Aliquam pellentesque ante in sapien bibendum suscipit. Praesent et felis eu tellus mollis ullamcorper non vitae quam.
</p>
<p>
Quisque dui felis, placerat quis blandit in, rutrum vel neque. Maecenas molestie semper rhoncus. Sed vel aliquam odio. Aenean vulputate nisi id vehicula ultrices. Nam tellus sem, faucibus sed libero ut, vehicula auctor eros. Nulla aliquam mauris sit amet lacinia vehicula. Quisque ac sem sed ante accumsan auctor. Suspendisse vitae dolor felis. Nullam in libero vel velit mollis molestie venenatis et libero. Cras vulputate, ante et tempus interdum, dui augue dapibus felis, sit amet porta tortor libero ut purus. Cras augue dolor, efficitur commodo tristique ut, gravida id augue. Praesent interdum nisl eu ultrices euismod. Aenean vulputate accumsan sem, eget eleifend elit eleifend auctor. Mauris egestas rhoncus quam, egestas accumsan neque ullamcorper a.
</p>
<p>
Praesent pharetra risus felis, non mollis lectus lobortis non. Praesent porttitor ultrices auctor. Suspendisse maximus est a sem mollis, ut vestibulum lacus scelerisque. Phasellus pretium non tortor quis malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin metus sapien, molestie at sollicitudin vitae, pulvinar at quam. Aliquam ultricies nisl ligula, sit amet finibus metus finibus sed. Etiam porta ultricies arcu tempus dignissim. Cras lobortis, ante non tristique vulputate, augue dui convallis tellus, eu feugiat justo nisi eget elit. Integer iaculis egestas lectus, vitae venenatis est imperdiet in.
<p>
Praesent mollis tempus imperdiet. Nunc iaculis enim lacus, sit amet eleifend velit porta vel. Etiam condimentum gravida dui vulputate dignissim. Nam ut dui vitae massa scelerisque pellentesque. Mauris vitae venenatis enim. Sed sagittis mi eget lacus congue, a bibendum nibh elementum. Aenean posuere pharetra purus, sit amet aliquet dui tempor nec. Fusce ut orci pulvinar, sollicitudin sapien eu, cursus augue.
</p>
<p>
Sed lacinia rutrum sem et convallis. Integer vel pretium mauris, eget porttitor nibh. Duis sed tellus massa. Fusce massa felis, laoreet vitae velit id, efficitur ornare nunc. Nam nec lectus non risus luctus vehicula et nec erat. Pellentesque tempor tincidunt odio pretium sagittis. Nullam id vestibulum nisl. Sed a odio leo. Proin in mi nisl. Aliquam ut bibendum arcu. Aliquam porta molestie nisl quis fringilla. In iaculis, ex in consectetur commodo, ante nulla rutrum orci, ac varius nibh nisi at ante.
</p>
<p>
Nullam ultricies sit amet massa nec placerat. Sed id sapien mi. Fusce maximus et libero quis fermentum. Nulla mattis ornare orci quis tempus. Integer id enim in ligula tincidunt lacinia. Nullam elit nulla, facilisis ultricies purus vitae, interdum malesuada massa. Nam tincidunt lacus erat. Fusce sagittis porttitor libero. Proin mi nibh, posuere sit amet dolor non, porttitor vulputate sapien. Sed faucibus a mi in molestie. Curabitur a bibendum neque.
</p>
<p>
Donec pretium mollis dui. Morbi quis tincidunt enim. Nunc venenatis leo a nunc lacinia, ac sodales odio lacinia. Fusce eget cursus massa. Curabitur ac luctus nulla, eu dignissim augue. Ut scelerisque ligula ut nulla tempus consectetur. Mauris eget odio velit. Donec faucibus imperdiet volutpat. Praesent ante odio, congue a quam ut, facilisis fringilla velit. Donec eget est risus. Integer lobortis neque sit amet massa vulputate, ac ultricies velit dignissim. Vivamus lectus turpis, varius at augue in, facilisis finibus justo. Pellentesque laoreet libero sed sapien maximus, sed feugiat leo gravida. Pellentesque at velit a purus condimentum hendrerit faucibus non leo.
</p>
</div>

Answer 2

To keep a background image in place you will want to use the 'background-attachment' property like so:
selector {
background-image: url(image.extension);
background-attachment: fixed;
}
You can place any content on top of the background image and as you scroll, the background will remain fixed in place while the content moves.