How do I get a div background image to scroll?

I want the background image of a div (with id="library_tracks") to be repeated in both x and y directions and to scroll with the div. For whatever reason, the background is staying fixed. I imagine the solution is pretty straig开发者_如何学Pythonht forward... any ideas?

Here's my CSS:

#library_tracks {
    overflow-y: scroll;
    height: 400px;
    border: thin solid #DADADA;
    background-image: url('../img/track_background.png');
    background-attachment: scroll;

}

The trick is to set the background not on the container div, but on the content div within it. Here's a working example where the <div id="library_tracks"> div displays the scrollbar, but the <div id="content"> is the actual content that's moved.

http://jsfiddle.net/somethingkindawierd/Cj29C/

This works because it's the content div that moves. The library_tracks div is stationary, but everything in it scrolls.

A entire divison will scroll on only one circumstance i.e. the contains does not fit within the division area.

Whether you have small background images or big one, if the content can fit within the div we will not get the scrolling even if you set the overflow option.