How to fix a background to a div but not to the browser?

[Cainnech]

Hello everybody,

I'm working on a site which uses divs.
My content in coming into a div with an overflow-y: scroll.

Now I want my background of that div to stay on the same place so I used background-attachement: fixed; which does the trick ofcourse.
However Since my page is quite long, it also automatically has a scrollbar on the side of the browser, when I move that one down, the background of my div doesn't go along, it stays fixed. Anybody any idea how I can solve it so that when the user scrolls inside the Div, the background remains fixed and when a user scrolls the page in total, the background comes along?

Check out http://www.lookandlisten.be/sites/boldgraphics/content/about.htm to see the problem.

Thanks,
Cainnech

[AutumnsDecay]

Try:

background-attachment: fixed;
background-repeat:no-repeat;
background-position: top center;
background:url('images/your_bg.pg');
background-color:#colorcode
 

The background-color you'd use it usually the last colored pixel in your background image.

[Cainnech]

Thanks for the reply AutumnsDecay,

I tried this before and now indeed my background goes along when I use the large scrollbar of the browser but when I use the scrollbar in the div, the background is moving also and I want it to remain fixed in the div.

[AutumnsDecay]

Can you apply the code I gave you and update the site so I can see it for myself? It might give better insight as to what's going on.

Thanks.

[Cainnech]

Oh...
It suddenly hit me. I can solve this by adding another div which just holds the text and not the background and do the overflow-y on that div...

Sorry to bother you guys.
Cainnech