using background-position to spread background accross multiple items

So I am working what should be a nifty effect. I have a bunch of li's of height 40px. I want a background image to display so that the top 40px is the background for the first li, the next 40px is the background for the second one... etc etc...

currently it will only show the top section of the image, I cannot get bgCount to increment... Any suggestions?

        var bgCount = 0;
        $('li').each(function(i) {                
           $(this).css('background-image', 'url(forground.jpg)');
           $(this).css('background-position', '0px' + bgCount + 'px');
           bgCount += 40;
        });
开发者_如何学Go

JSfiddle: http://jsfiddle.net/yZDDK/4/

---

You're missing a space

       $(this).css('background-position', '0px ' + bgCount + 'px');
                                              ^

---

JS Fiddle http://jsfiddle.net/wz2qx/5/