SVG как негабаритный фон сайта

Question

Я хочу создать веб-сайт с фиксированной шириной, шириной 960 пикселей и выровненный по левому краю. Однако я хочу использовать фон, который шире, чем 960 пикселей, и который заполняет пространство справа, если у пользователя экран шире, чем 960 пикселей.

Это легко, используя фоновое изображение:

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

Но можно ли сделать это там, где фоном является SVG, без горизонтальной полосы прокрутки?

Answer 1

Единственное, что я могу придумать, чтобы отключить горизонтальную полосу прокрутки, это сделать что-то вроде следующего:

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

Редактировать: После дальнейших размышлений я решил, что лучше посмотреть, предложит ли Google другие возможные предложения, и натолкнулся на следующее: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. Приведенное выше решение будет работать только при назначении фон для этого элемента div. Однако вы можете попробовать назначить overflow-x: hidden для самого тела, чтобы посмотреть, решит ли это проблему. Надеюсь, эти предложения помогут.

Answer 2

Взгляните на этот веб-сайт. По сути, они делают то, что вы хотите. У них есть SVG-градиент в качестве фона. При изменении размера браузера градиент корректируется, чтобы заполнить все окно.

http://emacsformacosx.com/

У них также есть много других SVG на странице, но фоновый градиент - все, что вам нужно.

Answer 3

Фон будет прокручиваться, только если ваше SVG-изображение имеет размеры в пикселях, превышающие размеры окна браузера.Если вы установите для изображения ширину 100% и высоту 100%, фон не должен прокручиваться.