¿Cómo hago un trabajo de fondo en IE?

¿Hay alguna manera conocida de hacer que el estilo de background-size estilo CSS funcione en IE?

Un poco tarde, pero esto también podría ser útil. Hay un filtro de 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 toda la imagen para que quepa en el área asignada, por lo que si está usando un sprite, esto puede causar problemas.

Pliego de condiciones: filtro AlphaImageLoader @microsoft

Creé jquery.backgroundSize.js : un plugin jquery de 1.5K que se puede usar como una alternativa de IE8 para los valores de “cobertura” y “contener”. Eche un vistazo a la demostración .

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

  

Ha pasado tanto tiempo desde que trabajé en este fragmento de código, pero me gustaría agregar más compatibilidad con el navegador. He añadido 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 podría ser útil también. Existe el jQuery-backstretch-plugin que puede usar como un polyfill para background-size: cover. Supongo que debe ser posible (y bastante simple) tomar la propiedad css-background-url con jQuery y pasarla al plugin jQuery-backstretch. Una buena práctica sería probar la compatibilidad con el tamaño de fondo con modernizr y utilizar este complemento como una alternativa.

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

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

(Descargo de responsabilidad: no examiné el backstretch-plugin a fondo, pero parece hacer lo mismo que background-size: cover)

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

Para citar la documentación:

Suba backgroundsize.min.htc a su sitio web, junto con el .htaccess que enviará el tipo mime requerido por IE (Apache solamente – está construido en nginx, node e IIS).

En cualquier lugar donde use fondo de tamaño 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 “polyfill de fondo”) 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í!

Creo que la mejor manera es agregar la siguiente línea en la parte superior de tu archivo HTML. ¡Funciona bien para mí!