Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- how to make a nice background that nicely scrolls out of screen?


Paul_o_b - 8:46 pm on Jan 9, 2013 (gmt 0)


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.)


Thread source:: http://www.webmasterworld.com/css/4534569.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com