SVG as oversized website background

Question

I want to build a fixed width website (say 960px, to pluck a number at random) aligned to the left, but with a background which is wider than this 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.

Answer 2

The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.

Answer 3

Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.

http://emacsformacosx.com/

They also have a lot of other SVG on the page, but the background gradient is all you need.