IE 8: corrección de tamaño de fondo

Intenté agregar tamaño de fondo a IE, pero no funciona en absoluto:

HTML

Notícias

CSS:

 div#content h2#news { background: url('../images/news-background.jpg') no-repeat; background-size: 100%; border-radius: 20px; color: #fff; margin: 20px 0 0 20px; padding: 8px 20px; width: 90%; -moz-background-size: 100%; -moz-border-radius: 20px; -webkit-background-size: 100%; -webkit-border-radius: 20px; } 

¿Qué pasa con el filtro ?

Según lo publicado por ‘Dan’ en un hilo similar, hay una posible solución si no estás usando un sprite:

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

 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. Entonces, si estás usando un sprite, esto puede causar problemas.

Precaución
El filtro tiene un defecto, ya no se puede hacer clic en los enlaces dentro del área asignada.

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 .

La solución de su problema podría ser tan simple como:

 $("h2#news").css({backgroundSize: "cover"}); 

También he encontrado otro enlace útil. Es un hack de fondo usado así

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

https://github.com/louisremi/background-size-polyfill

Uso la solución de filtro de arriba, para ie8. Sin embargo … Para resolver el problema de los enlaces de congelación, haz lo siguiente:

 background: no-repeat center center fixed\0/; /* IE8 HACK */ 

Esto ha resuelto el problema de los enlaces congelados para mí.

Como señala @RSK, IE8 no admite el tamaño de fondo. Para encontrar una manera de lidiar con esto, utilicé algunos hacks específicos de IE como se muestra aquí:

 //IE8.0 Hack! @media \0screen { .brand { background-image: url("./images/logo1.png"); margin-top: 8px; } .navbar .brand { margin-left: -2px; padding-bottom: 2px; } } //IE7.0 Hack! *+html .brand { background-image: url("./images/logo1.png"); margin-top: 8px; } *+html .navbar .brand { margin-left: -2px; padding-bottom: 2px; } 

Utilicé esto y pude cambiar la imagen de mi logotipo a una imagen fea. Pero el resultado final está bien. Te sugiero que pruebes algo como esto.