There is a site specifically that has this effect, I'm wondering if anyone can point me towards a good tutorial to achieve a similar effect. The website is http://www.royalsalute.com/en/whisky. I'd love to know how to get the background image div to stick to the top, have the content scroll with the page, and then have the new background image stick to the top once the user gets there...
Thoughts?
1 Answer 1
I think what you're looking for is the background-attachment style.
Here's a fiddle that sort of shows the concept.
Basically you put your copy inside of another parent div, then you set the parent div's background image, background-size: cover, and background-attachment:fixed;
so HTML
<div class="sticky-div">
<p>Lots of copy here or other divs or whatever</p>
</div>
CSS
.sticky-div {
background-image: url(someimage.jpg);
background-size: cover // ensures it fills the space
background-attachment: fixed // Makes the background static, as in it doesn't scroll
answered Apr 11, 2014 at 20:03
Trattles
6771 gold badge6 silver badges22 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
Sarah Morrow
But what happens when you want to have multiple background images come in, at various points.
Trattles
Sorry I didn't see your reply until now :P I'm sure you've solved it. Anyhow, if you want to have several different background images come in, then you just layer multiple divs using the above technique. Check out slaphands.com/process for an example. Essentially what you've got to remember is that even though that image doesn't look like it's moving, the div it's in actually is. So when you reach the end of that div, the next one will come in.
lang-js