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

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

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

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 .

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;

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)

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

En IE11 Windows 7 esto funcionó para mí,

background-size: 100% 100%;

puede usar este archivo ( https://github.com/louisremi/background-size-polyfill "fondo-tamaño polyfill") para IE8 que es realmente fácil de usar:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}

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í!