¿Cómo hago que el tamaño de fondo funcione en IE?


188

¿Hay alguna forma conocida de hacer que el estilo CSS background-sizefuncione en IE?


1
¿Qué efecto estás tratando de obtener?
ZippyV

@ZippV Tengo un div de aproximadamente 250 píxeles de ancho. pero la imagen de fondo es de 300 píxeles de ancho. Quiero que la imagen de fondo encaje completamente (tamaño de fondo: 100%) para que no se corte. Luego :hover, quiero que el tamaño del fondo cambie al ancho completo de 300 px (tamaño del fondo: automático) para crear la ilusión de hacer zoom
JD Isaacks

1
Puede lograr el mismo efecto utilizando una etiqueta img. Si necesita algo encima, use el índice z.
ZippyV

1
¡@John considera cambiar la respuesta aceptada si la solución de Dan funcionó para ti!
Pekka

@ZippyV La etiqueta IMG a veces tiene efectos secundarios innecesarios, por ejemplo, se puede seleccionar o hacer clic con el botón derecho. Estos a veces están bien, a veces no.
peterh - Restablece a Mónica el

Respuestas:


312

Un poco tarde, pero esto también podría ser útil. Hay un filtro IE, para IE 5.5+, que puede aplicar:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

Sin embargo, esto escala la imagen completa para que quepa en el área asignada, por lo que si está utilizando un sprite, esto puede causar problemas.

Especificación: AlphaImageLoader Filter @microsoft


12
Me pregunto por qué MS no solo implementó esa funcionalidad usando CSS. ¡Muchas gracias!
Martin Andersson el

2
¿Qué versiones de IE admiten esto por favor?
ᆼ ᆺ ᆼ

8
Si está utilizando enlaces y botones dentro del elemento que definimos, esos enlaces y botones no funcionarán. ¿Alguien sabe un método para solucionar esto?
rubyprince

2
Tuve que agregar position: relative; z-index: 999para entrada, un botón dentro de tales divs
rubyprince

10
Sin embargo, el método de escala no mantiene la proporción ... Por lo tanto, es mejor que su elemento tenga la misma proporción que su imagen.
Yves Van Broekhoven

45

He creado jquery.backgroundSize.js : 1.5K un plugin de jQuery que puede ser utilizado como una reserva para IE8 "cubierta" y "contiene" valores. Echa un vistazo a la demo .


12
De acuerdo con la documentación de jquery.backgroundSize.js, el complemento está en desuso y en su lugar recomiendan background-size-polyfill .
VOIDHand

La versión actualizada no funciona con background-position: fixed.
Ryan Burney el

@VOIDHand Tanto el filtro como el polyfill no funcionaron para mí, utilicé jquery.backgroundSize para el éxito
Chris Marisic

21

Gracias a esta publicación, mi CSS completo para la felicidad del navegador cruzado es:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

Ha pasado mucho tiempo desde que trabajé en este código, pero me gustaría agregar más compatibilidad con el navegador. He agregado esto a mi CSS para obtener más compatibilidad con el navegador:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

@ Gaurav123 probar-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
honk31

55
esto hace que mi ie8 muestre la imagen de fondo dos veces, una con dimensiones escaladas y la segunda con un fondo grande no dimensionado.
arekk

ie7: se ve bien, pero ya no puede hacer clic en los enlaces. (¿Por qué ie7? Los sitios gubernamentales son muy lentos para actualizar)
Robbie Matthews

5

Incluso más tarde, pero esto también podría ser útil. Existe el plugin jQuery-backstretch-plugin que puede usar como polyfill para background-size: cover. Supongo que debe ser posible (y bastante simple) tomar la propiedad css-background-url con jQuery y alimentarlo al complemento jQuery-backstretch. Una buena práctica sería probar el soporte de tamaño de fondo con modernizr y usar este complemento como alternativa.

El plugin backstretch fue mencionado en SO aquí . El sitio jQuery-backstretch-plugin está aquí .

De manera similar, podría crear un jQuery-plugin o script que haga que el tamaño de fondo funcione en su situación (tamaño de fondo: 100%) y en IE8-. Entonces, para responder a su pregunta: Sí, hay una manera, pero no hay una solución plug-and-play (es decir, debe codificar usted mismo).

(descargo de responsabilidad: no examiné el complemento de estiramiento de fondo a fondo, pero parece hacer lo mismo que el tamaño de fondo: cubierta)


5

Hay un buen polyfill para eso: louisremi / background-size-polyfill

Para citar la documentación:

Cargue fondosize.min.htc a su sitio web, junto con el .htaccess que enviará el tipo mime requerido por IE (solo Apache, está integrado en nginx, node e IIS).

Cada vez que use el tamaño de fondo en su CSS, agregue una referencia a este archivo.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

Este polyfill simplemente funciona. tamaño de fondo: cubrir o contener en IE8. Sin despeinarse sin problemas.
jimlongo

Este enfoque es compatible con ambos containy cover. Contiene 5,7 KB no muy mal porque se transferirá en un paquete de red.
SMMousavi

2

En IE11 Windows 7 esto funcionó para mí,

background-size: 100% 100%;


0

Intenté con el siguiente script:

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

¡Funcionó para mí!


para que versión
nihiser
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.