Utilizzo di SVG come immagine di sfondo

Non riesco a farlo funzionare come desiderato. La mia pagina cambia altezza in base a quali contenuti viene caricato e se si richiede un rotolo, lo SVG non sembra essere di stretching ...Utilizzo di SVG come immagine di sfondo

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>

E 'possibile farlo con un solo CSS3? Mi piacerebbe non dover caricare ALTRE librerie JS o chiamare ... Qualche idea? Grazie!

fonte

2012-02-07 Dirty Bird Design

provare a posizionare sul vostro 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; 
}

fonte

2012-02-08 04:36:54 Duopixel

No, qualche comportamento strano ho anche html {height: 100%} –

Continua a ripetersi dopo che è stata raggiunta l'altezza di 800px specificata in svg. Ive ha provato a fare l'altezza e la larghezza nel svg 100%, il che rende solo peggio. –

Sei sicuro che si ripeta? Hai un rect con il colore di sfondo che fa capolino dal fondo. – Duopixel

Si può provare a rimuovere gli attributi width e height sull'elemento radice svg, aggiungendo preserveAspectRatio="none" viewBox="0 0 1024 800" invece. Fa almeno una differenza in Opera, assumendo che tu volessi che lo svg si estenda per riempire l'intera regione definita dagli stili CSS.

fonte

2012-02-08 12:21:19

questo è quello che ha fatto il trucco per me – Octopus

Hai impostato una larghezza e un'altezza fissa nel tuo tag svg. Questa è probabilmente la radice del tuo problema. Prova a non rimuoverli e imposta la larghezza e l'altezza (se necessario) usando CSS.

fonte

2015-01-23 05:29:08

Utilizzo di SVG come immagine di sfondo

risposta

Problemi correlati