El uso de SVG como imagen de fondo

Me parece que no puede conseguir que esto funcione como se desea. Mi página los cambios de altura sobre la base de lo que el contenido se carga y si se requiere un desplazamiento, el svg no parece ser estiramientos…

CSS:

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;
}

HTML:

<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 con solo CSS3? Me gustaría no tener que cargar OTRO JS biblioteca o llamar…Alguna idea? Gracias!

3 Kommentare

  1. 25

    Puede intentar quitar la width y height atributos en el archivo svg elemento raíz, la adición de preserveAspectRatio="none" viewBox="0 0 1024 800" lugar. Esto hace una diferencia en la Ópera, al menos, suponiendo que usted quería que el svg para estirar y rellenar toda la región definida por los estilos CSS.

    • esto es lo que hizo el truco para mí
    • preserveAspectRatio="none" trabajado en mi caso .
  2. 2

    Tratar de colocarlo en su 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;
    }
    • nope algunos verdaderamente extraño comportamiento también me han html{height:100%}
    • Se repite después de la 800px de la altura especificada en el svg es alcanzado. He tratado de hacer la altura y la anchura en el svg 100%, que sólo lo hace peor.
    • Son usted seguro de que es repetida? Usted tiene un rectángulo con el color de fondo que se asoma desde el fondo.
    • Poner background-size último, para corregir proveedor de prefijos orden
    • has utilizado una externas archivo svg, pero muchos de los que vienen aquí espera también una solución para la línea SVG dentro de la CSS.
  3. 0

    Ha establecido un ancho fijo y altura en su etiqueta svg. Esta es probablemente la raíz de su problema. Trate de no eliminación de aquellos, y la anchura y la altura (si es necesario) mediante el uso de CSS en su lugar.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea