Usar o SVG como imagem de fundo

Question

Usar o SVG como imagem de fundo

Não consigo fazer com que isto funcione como desejado. A minha página muda a altura com base no conteúdo carregado e, se necessitar de um pergaminho, o svg não parece estar a esticar-se...

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>

É possível fazer isto apenas com CSS3? Gostaria de não ter de carregar outra biblioteca JS ou ligar...Alguma ideia? Obrigado!

21

css css3 svg

Author: Ruslan López, 2012-02-08

Source

3 answers

score 22 · Answer 1

Poderá tentar remover os atributos width e height no elemento raiz svg, adicionando preserveAspectRatio="none" viewBox="0 0 1024 800" em alternativa. Faz uma diferença no Opera pelo menos, assumindo que você queria que o svg se esticasse para preencher toda a região definida pelos estilos CSS.

score 1 · Answer 2

Tente colocá-lo no seu 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;
}

score 0 · Answer 3

Definiu uma largura e uma altura fixas na sua etiqueta svg. Esta é provavelmente a raiz do seu problema. Tente não removê-los e definir a largura e a altura (se necessário) usando o CSS em alternativa.