CODEWITHSUNDEEP
css
liamacheung
liamacheung

Reputation: 179

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 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;

}

Upvotes: 3

Views: 13460

Answers (2)

Starx
Starx

Reputation: 79069

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.

Upvotes: 0

Jonathan Beebe
Jonathan Beebe

Reputation: 5226

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.

Upvotes: 8

Related Questions