Parallax Background in div of Content <p>Is it possible to create a parallax background inside a div that has a certain width? Every tutorial I've seen has parallax backgrounds on full screen websites. My site is not full screen width, but I would still like to use the parallax effect within the content of my site. Obviously if I use the background-attachment: fixed; css property, the background becomes fixed to the body tag and not of the actual div.</p> <p>To understand what I'm trying to do, you can look at this simple jsfiddle: <a href="http://jsfiddle.net/yh02y6dy/" rel="nofollow noreferrer">http://jsfiddle.net/yh02y6dy/</a></p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>//Parallax function simpleParallax() { //This variable is storing the distance scrolled var scrolled = $(window).scrollTop() + 1; //Every element with the class "scroll" will have parallax background //Change the "0.3" for adjusting scroll speed. $('.scroll').css('background-position', '0' + -(scrolled * 0.05) + 'px'); } //Everytime we scroll, it will fire the function $(window).scroll(function (e) { simpleParallax(); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.scroll { /*Set a css background */ background:url(http://cdn.wallpapersafari.com/63/15/o20clA.jpg) fixed; width:600px; height:250px; line-height:300px; margin:0 auto; margin-top:150px; text-align:center; color:#fff; } body { min-height:3000px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="scroll"&gt; &lt;h1&gt;Text on parralax background&lt;/h1&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>You can see that the background image is fixed to the top left corner of the screen and not to the div. I want the background image to start where the div is starting.</p> <p>I'm not opposed to using jquery if that is what's needed to make this work.</p> <p>Thanks!</p>