CODEWITHSUNDEEP
csshtmlscrollbackgroundsvg
wheresrhys
wheresrhys

Reputation: 23500

SVG as Oversized Website Background

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?

Upvotes: 0

Views: 1708

Answers (3)

Axeva
Axeva

Reputation: 4737

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.

Upvotes: 0

Divya Manian
Divya Manian

Reputation: 1985

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.

Upvotes: 0

Anne Porosoff
Anne Porosoff

Reputation: 1941

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.

Upvotes: 2

Related Questions