How do I get a div background image to scroll?
Question by liamacheung
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 straight 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;
}
Answer by somethingkindawierd
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.
Answer by Starx
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.
