Question

I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.

This is easy using a background image:

body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}

But can I do it where the background is an SVG, without a horizontal scroll bar appearing?

Answer 1

The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:

#wrapper {width:960px; overflow-x:hidden}

Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.