web-dev-qa-db-fra.com

Utiliser SVG comme image de fond

Je n'arrive pas à obtenir que cela fonctionne comme souhaité. Ma page change de hauteur en fonction du contenu chargé et s'il nécessite un défilement, le svg ne semble pas s'étirer ...

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;
}
<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 faire cela avec seulement CSS3? Je voudrais ne pas avoir à charger la bibliothèque ANOTHER JS ou appeler ... Des idées? Merci! 

csscss3svg
22
Dirty Bird Design

Vous pouvez essayer de supprimer les attributs width et height sur l'élément racine svg, en ajoutant preserveAspectRatio="none" viewBox="0 0 1024 800" à la place. Cela fait au moins une différence dans Opera, en supposant que vous vouliez que le svg s’étire pour remplir toute la région définie par les styles CSS.

24
Erik Dahlström

Essayez 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;
}
1
Duopixel

Vous avez défini une largeur et une hauteur fixes dans votre balise svg. C'est probablement la racine de votre problème. Essayez de ne pas les supprimer et définissez la largeur et la hauteur (si nécessaire) en utilisant CSS.

0
Ricardo Parker