css - pantalla - tamaño de fondo: 100% 100%; no funciona correctamente en Chrome

fondo css

Question

Estoy usando una imagen svg como fondo. Estoy tratando de usar el background-size: 100% 100%; de background-size: 100% 100%; de CSS3 background-size: 100% 100%; pero no parece funcionar, incluso en los navegadores que deberían admitirlo (como Chrome).

Si miras este sitio , verás el #special-post article (a la derecha / debajo de la imagen de la comida) con un fondo de aspecto de pancarta roja. Tenga en cuenta que a medida que reduce el tamaño de la ventana, la altura de la imagen de fondo disminuye para conservar sus proporciones, en lugar de estirar, como me gustaría.

EDITAR: He comprobado esto en FireFox y funciona correctamente ... por lo que parece ser un problema de webkit.

EDITAR: He comprobado esto en Safari y funciona! Así que parece que mi problema es específico de Chrome.

(PD: Estoy familiarizado con this solución alternativa, usando una etiqueta img , pero prefiero no usarla).

Answer 1

Aquí hay una solución:

Abra su archivo .svg , encuentre la etiqueta <svg> al principio y agregue la siguiente propiedad en su interior:

preserveAspectRatio="none"

Fuente: http://www.yootheme.com/support/question/6801?order=modified

Answer 2

Esto sigue siendo un problema en Chrome 39, pero no en Firefox. Me topé con él al escalar un SVG de fondo de esta manera:

background-image: url(bg.svg);
background-repeat: repeat-x;
background-size: 1200px auto;

Incluso con las dimensiones horizontales exactas en el píxel en el SVG tengo un pequeño espacio. Funcionó cuando no lo escalaba

background-size: auto auto;

No hay mucha solución para no poder escalar su fondo, pero aún así.

Answer 3

Resulta que este es un error conocido en Chrome que es específico para imágenes de fondo svg. Estoy ejecutando v 17.0.963.56, en caso de que a alguien le importe, y puede seguir el error here .

Answer 4

background-size: cover

Funciona en todos los ámbitos. Probado con Safari, Chrome y FF.