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!

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