Parallax scrolling tutorial for background image

Question

After spending days trying to figure out why I can't seem to get parallax scrolling working for one picture on a website I'm working on, I'm finally posting here. So I have this code so far:

HTML:

<div class="intro">
[a bunch of stuff here]
</div>

CSS:

.intro {
 background: url(../images/IMG_100.png) 50% 0 fixed; 
 background-position: center;
 margin: 0 auto; 
 width: 100%;
 box-shadow: 0 0 50px rgba(0,0,0,0.8);
 padding: 100px 0;
}

I've pretty much tried all the tutorials for a simple parallax scroll effect, but they don't seem to work for my situation as it stands. What seemed most promising to me was to use the skrollr.js plugin - I tried adding the following to my div tag:

<div id="intro" class="intro"
 data-bottom="opacity:1;background-position: 0px -50px;"
 data-center="opacity:1;background-position: 0px 0px;"
 data-top="opacity:1;background-position: 0px 50px;">

I then initialized skrollr at the end of my html:

<script type="text/javascript" src="js/skrollr.js"></script>
<script>
 window.onload = function() {
 skrollr.init(); 
 }
</script>

...doesn't work. I'm fairly new to this, so any help would be greatly appreciated!

• user1183682: You know you're missing a closing </div> at the end of id=intro? Can you provide a demonstration of what "doesn't work"? Try jsfiddle.net.
• eggrollers: perhaps I'm doing something wrong with the javascript? here's a fiddle of something that works in fiddle, but not when I it locally jsfiddle.net/XFj82/3 @DThomas

Answer 1

I think that the id of your main div should be equal to skrollr-body and not intro.

1st EDIT

Actually, I see there are situations where the main id doesn't need to be named scrollr-body. Maybe this tutorial could help you achieve different effects since I couldn't find any official documentation.

Check the fiddle of your snippet from the question.

2nd EDIT

I changed your html code to this

<section id="skrollr-body">
 <div class="intro"
 data-bottom="opacity:1;background-position: 0px -50px;"
 data-center="opacity:1;background-position: 0px 0px;"
 data-top="opacity:1;background-position: 0px 50px;">
 <h1>Content in here</h1>
 <p>first big text block</p>
 <p>second huge text block</p>
 </div> 
</section>

I also changed the background attribute of the .info class to this

background: url('bg-image.jpg') no-repeat fixed center;

but feel free to experiment with values. Check the working fiddle

• eggrollers: I tried that tutorial, it didn't seem to work for me :(. I think it might be something with my javascript that I'm using, perhaps I'm not using skrollr.js properly?
• hex494D49: @eggrollers Post your code on [link](jsbin.com) or [link](jsfiddle.net) and I'll try to solve the problem.
• eggrollers: jsfiddle.net/pfwv5 this is pretty much what I have so far, I removed a bit of what I had inside the main intro div tags as it didn't seem too relevant. I have another js file linked, but as far as I know that one is only responsible for smooth scrolling up and down the page (I left the links in there in case they're of any importance). @hex494D49
• hex494D49: @eggrollers Check the updated answer. And play with the background attribute according to your background image.