SVG en tant que site Web surdimensionné Contexte

Question

Je souhaite créer un site Web de largeur fixe de 960px et aligné à gauche. Cependant, je veux utiliser un fond qui est plus large que 960px et qui remplit l'espace vers la droite si l'utilisateur a un écran plus large que 960px.

C'est facile en utilisant une image de fond:

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

Mais je peux le faire où l'arrière-plan est un SVG, sans barre de défilement horizontale qui apparaît?

Answer 1

La seule chose que je peux penser à qui désactiver la barre de défilement horizontale est de faire quelque chose comme ce qui suit:

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

Edit: Après mûre réflexion j'ai décidé qu'il était préférable de voir si Google a offert jusqu'à d'autres suggestions possibles et je suis tombé sur ceci: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. La solution ci-dessus ne fonctionnera que si vous affectez l'arrière-plan à cet élément div. Vous pouvez cependant essayer d'assigner overflow-x: hidden au corps lui-même pour voir si cela résout le problème. Espérons que ces suggestions aident.

Answer 2

L'arrière-plan ne défilera que si les dimensions de votre image SVG sont supérieures à celles de la fenêtre du navigateur. Si vous définissez l'image pour avoir 100% de largeur et 100% de hauteur, l'arrière-plan ne doit pas défiler.

Answer 3

Jetez un coup d'oeil à ce site Web. Ils font essentiellement ce que vous voulez. Ils ont un dégradé SVG en arrière-plan. Lorsque vous redimensionnez le navigateur, le dégradé s'ajuste pour remplir toute la fenêtre.

http://emacsformacosx.com/

Ils ont aussi beaucoup d'autres SVG sur la page, mais le gradient de fond est tout ce dont vous avez besoin.