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

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

Author: John Bensin, 2010-06-07
Source

9 answers

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 toda la imagen para que quepa en el área asignada, por lo que si está utilizando un sprite, esto puede causar problemas.

Especificación: Filtro Alfaimageloader @ microsoft

 311
Author: Dan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-27 19:22:11

He creado jquery.Tamaño de fondo.js: un plugin de jquery de 1.5 K que se puede usar como un respaldo de IE8 para los valores "cover" y "contain". Echa un vistazo a la demo .

 44
Author: Louis-Rémi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-13 19:22:06

Gracias a este post, mi css completo para cross browser happiness 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 tanto tiempo desde que he trabajado en esta pieza de código, pero me gustaría agregar para más compatibilidad del navegador He añadido esto a mi CSS para más compatibilidad del navegador: 

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 21
Author: Scott Dallas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-21 15:32:24

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

El complemento backstretch fue mencionado en SO aquí.El jQuery-backstretch-plugin-site is here.

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

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

 5
Author: metatron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:46:57

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

Para citar la documentación:

Carga backgroundsize.min.htc a su sitio web, junto con el .htaccess que enviará el tipo mime requerido por IE (solo Apache - está construido en nginx, nodo e IIS).

Donde quiera que use background-size 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);
}
 5
Author: Dorian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-20 20:59:58

En IE11 Windows 7 esto funcionó para mí, 

background-size: 100% 100%;
 2
Author: Jana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-20 13:21:59

Puede usar este archivo ( https://github.com/louisremi/background-size-polyfill "background-size polyfill") para IE8 que es realmente simple de usar: 

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-15 12:36:50

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

 0
Author: Bulla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-04 13:55:57

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 -5
Author: Alireza815,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-08 21:43:43