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...
É possível fazer isto apenas com CSS3? Gostaria de não ter de carregar outra biblioteca JS ou ligar...Alguma ideia? Obrigado!
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>
21
Author: Ruslan López, 2012-02-08
3 answers
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.
22
Author: Erik Dahlström, 2012-02-08 12:21:19
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;
}
1
Author: Duopixel, 2012-02-08 04:36:54
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.
0
Author: Ricardo Parker, 2015-01-23 05:29:08