L'utilisation du format SVG comme image d'arrière-plan

Je n'arrive pas à obtenir que cela fonctionne comme souhaité. Ma page change de hauteur en fonction du contenu qui est chargé et si elle nécessite un parchemin, le svg ne semble pas être étirements...

CSS:

html {
  height: 100%;
  background-image: url(http://www.horizonchampion.eu/themes/projectbase/images/bg.svg);
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: cover;
}

HTML:

<svg width="1024" height="800" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <radialGradient fy="0.04688" fx="0.48047" r="1.11837" cy="0.04688" cx="0.48047" id="svg_2">
                <stop stop-color="#ffffff" offset="0"/>
                <stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
            </radialGradient>
            <radialGradient fy="0.04688" fx="0.48047" r="1.71429" cy="0.04688" cx="0.48047" id="svg_5">
                <stop stop-color="#ffffff" offset="0"/>
                <stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
            </radialGradient>
         </defs>
         <g display="inline">
            <title>Layer 1</title>
            <rect fill="#eaeaea" stroke-width="0" x="0" y="0" width="1024" height="800" id="svg_1"/>
        </g>
         <g>
              <title>Layer 2</title>
              <rect id="svg_3" height="282" width="527" y="1" x="1" stroke-width="0" fill="url(#svg_2)"/>
              <rect id="svg_4" height="698" width="1021.99999" y="1" x="1" stroke-width="0" fill="url(#svg_5)"/>
         </g>
    </svg>

Est-il possible de le faire avec CSS3? J'aimerais ne pas avoir à charger une AUTRE bibliothèque JS ou appel...des idées? Merci!

InformationsquelleAutor Dirty Bird Design | 2012-02-07

25

Vous pouvez essayer de retirer la width et height attributs sur la svg de l'élément racine, ajoutant preserveAspectRatio="none" viewBox="0 0 1024 800" à la place. Cela fait une différence à l'Opéra, au moins, en supposant que vous vouliez le svg de s'étirer pour remplir la totalité de la région définie par les styles CSS.
- c'est ce qu'a fait le tour pour moi
- preserveAspectRatio="none" a fonctionné dans mon cas .
InformationsquelleAutor Erik Dahlström
1

Essayer de le placer sur votre body
```
body {
    height: 100%;
    background-image: url(../img/bg.svg);
    background-size:100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size:cover;
}
```
- nope certains réel le comportement bizarre j'ai aussi html{height:100%}
- Il ne cesse de répéter après le 800px de hauteur spécifiée dans le svg est atteint. J'ai essayé de faire de la hauteur et la largeur dans le svg 100%, qui fait juste empirer les choses.
- Êtes-vous sûr que c'est de répéter? Vous avez un rectangle avec la couleur d'arrière-plan qui permet d'afficher un aperçu de la partie inférieure.
- Mettre background-size dernier, à bon vendeur préfixes ordre
- vous avez utilisé un externe (fichier svg, mais beaucoup de ceux qui viennent ici, attendez-vous aussi une solution pour inline SVG à l'intérieur de la CSS.
InformationsquelleAutor methodofaction
0

Vous avez défini un fixe la largeur et la hauteur dans votre balise svg. C'est probablement à l'origine de votre problème. Essayez de ne pas la suppression de ces et de définir la largeur et la hauteur (si nécessaire) à l'aide de CSS à la place.

InformationsquelleAutor Ricardo Parker

Vous devez vous connecter pour publier un commentaire.