it-swarm.com.de

Verwenden von SVG als Hintergrundbild

Ich kann nicht scheinen, dass dies wie gewünscht funktioniert. Meine Seite ändert sich je nach geladenem Inhalt in der Höhe. Wenn ein Bildlauf erforderlich ist, scheint das SVG nicht zu strecken.

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>

Kann man das nur mit CSS3 machen? Ich möchte keine weitere JS-Bibliothek laden oder anrufen ... Irgendwelche Ideen? Vielen Dank! 

22

Sie können versuchen, die width- und height-Attribute des svg-Stammelements zu entfernen, stattdessen preserveAspectRatio="none" viewBox="0 0 1024 800" hinzuzufügen. Zumindest in Opera macht das einen Unterschied, vorausgesetzt, Sie wollten, dass sich das svg-Element auf die gesamte durch die CSS-Stile definierte Region ausdehnt.

24
Erik Dahlström

Platziere es auf deiner 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

Sie haben in Ihrem svg-Tag eine feste Breite und Höhe festgelegt. Dies ist wahrscheinlich die Wurzel Ihres Problems. Entfernen Sie diese nicht und legen Sie stattdessen Breite und Höhe mithilfe von CSS fest.

0
Ricardo Parker