Parallax Scrolling Background (Image)

1/3 Scrolling of background compared to foreground. Using a background-image for performance

HTML

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<script src="https://raw.github.com/NobleJS/setImmediate/master/setImmediate.js"></script>
<div id="background"></div>




<p>M</p>

<p>You thin</p>

<p>Your</p>

CSS

/* using Prefix free for simple demo CSS */
html, body {
    color: #FFF;
}

p {
    background: rgba(255,255,255,0.2);
    font-size: 1.2em;
    margin: 2em;
    padding: 1em;
}
p + p {
    margin-top: 0;
}

#background {
    position: fixed;
    top: 0; 
    right: 0;
    bottom: 0;
    left: 0;
    
    z-index: -1;
    
    transition: top linear 0.01s;
    
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtQTFRFHh4eFBQUHR0dFRUVExMTGhoaJCQkIiIiGxsbIMxiqwAAAC1JREFUeNpi4IADFjhgoK0gGxzQRJAZDpjggJAgA4YgI2Ht7HDACge0EAQIMABIfAhjU2wJugAAAABJRU5ErkJggg==") #131313;
}

JavaScript

var $document = $(document),
    $background = $('#background'),
    moveBackground = function() {
        var so = $document.scrollTop();
        $background.css('top', (-so/3) + "px");
    };

$(window).on('scroll', function(e) {
    // detach from scroll event handler
    // event handlers should exit as quickly as possible
    setImmediate(moveBackground);
});

/*
    using setImmediate() from:
        https://github.com/NobleJS/setImmediate

    using prefix free for simplicity:
        http://leaverou.github.com/prefixfree/

    using and image generated from the carbon pattern from
        http://lea.verou.me/css3patterns/#carbon

    using some blind text:
        http://slipsum.com/


    see http://jsfiddle.net/rodneyrehm/gEwMz/ for performance
    penalty when using gradients for composited pattern
*/