how to make a nice background that nicely scrolls out of screen?

[vampke]

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

[Paul_o_b]

Hi,

If you can't use the body element then create a 100% wide wrapper to hold all your page content and set a min-width of 960px on it.

Then apply the background image to this element but place the image at 50% 0 and it will remain centred with the layout but never force a scrollbar.

The only drawback of this method is that there will be a 1px jog in some browsers as they round the odd pixel screen widths and if you are trying to match the background to the 960px auto margin element background you may see the 1px gap at the sides.

If you make sure that your background image has an overlap 0f a couple of pixels in the center then that should hide the gap (e.g. don't make the 960px middle section of the background image white if it has to match up with a coloured page).

If you are creative with the image it will work fine. This technique is usually good for shadows that can spread out but not force scrollbars etc. (Of course we can do that with box-shadow in good browsers now though.)