Apply scrolling effect to multiple body background
<p>I have a body/page with multiple backgrounds:</p>

<pre><code>body {
    background-image: url("../../../myfiles/headers/mandala-bottom.png"),url("../../../myfiles/backgrounds/bottom-fade.png"), url("../../../myfiles/backgrounds/small-fill.jpg");
    background-repeat:no-repeat, repeat-x,  repeat;
    background-attachment:scroll, scroll,  scroll;
    background-position:bottom center, bottom center,  top;
    }
#page {
    background:url("../../../myfiles/backgrounds/top-fade.png") repeat-x fixed top center
    }
</code></pre>

<p>There's a pic at the bottom, not repeated, which scrolls up; under this a picture at the bottom, repeated horizontally, which also scrolls up; a picture at the top, in a separate div, which scrolls more slowly (explained below) and finally a fill which takes care of the middle part.</p>

<p>In order to get a semi-parallax effect (without affecting the content, a regular wordpress loop), I have the top-fade background in a separate layer, #page, in order to slow down its scrolling.</p>

<p>jQuery:</p>

<pre><code> $(document).ready(function(){
                var $win = $(window);

                $('div#page').each(function(){
                var scroll_speed = 8;
                var $this = $(this);
                    $(window).scroll(function() {
                        var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
                        var bgPosition = 'center '+ bgScroll + 'px';
                        $this.css({ backgroundPosition: bgPosition });
                        });
                    });
                });
</code></pre>

<p>This solution works (though the scrolling with the wheel is a bit choppy, particularly in IE).</p>

<p>I was thinking that it would be even better if I could also apply the same effect to my bottom-fade image. To do so I should create yet another div, which makes my markup a bit too nested for my taste.</p>

<p>I was wondering: <strong>is there a way for jQuery to directly interact with multiple backgrounds</strong>?</p>

<p>If there is, could I use it to <strong>apply different scrolling effects while having all the pictures in the same element</strong>?</p>