css - insertar - svg on img tag
Usando SVG como imagen de fondo (3)
Ha establecido un ancho y una altura fijos en su etiqueta svg. Esta es probablemente la raíz de su problema. Intente no eliminarlos y configure el ancho y el alto (si es necesario) usando CSS en su lugar.
Parece que no puedo hacer que esto funcione como se desea. Mi página cambia la altura según el contenido que se carga y si requiere un desplazamiento, el svg no parece estar estirándose ...
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>
¿Es posible hacer esto solo con CSS3? Me gustaría no tener que cargar otra biblioteca de JS o llamar ... ¿Alguna idea? ¡Gracias!
Intenta colocarlo sobre tu 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;
}
Puede intentar eliminar los atributos de width y height en el elemento raíz svg, agregando preserveAspectRatio="none" viewBox="0 0 1024 800" lugar. Al menos, hace una diferencia en Opera, suponiendo que desea que el svg se extienda para llenar toda la región definida por los estilos CSS.