vampke - 10:22 am on Jan 9, 2013 (gmt 0)

Hi guys,

This is something I have been struggling for a quite a while.
I hope you guys can finally help me sort this one out!

Lets say for arguments' sake that I have background images of 980px and the content area is 960px wide.
The background image for the header, content and footer divs are different: the content bg is 1px repeat-y.
Header and footer bg's are no repeat.
Everything has margin: 0 auto

I need to set my divs to 980px otherwise the background gets cut off.

When I have a viewport between 960 and 980px a horizontal scrollbar will appear. I need this to only appear when my viewport is <960px.
How to achieve that without setting a background in the css body and wihtout fancy javascript hax?

edit: just to be clear: I want the background to nicely scroll out of the viewport when viewport between 960 and 980px, so that the content remains intact