Come faccio a far funzionare la dimensione dello sfondo in IE?

Esiste un modo noto per far funzionare lo stile CSS background-sizein IE?

Un po 'in ritardo, ma potrebbe anche essere utile. Esiste un filtro IE, per IE 5.5+, che puoi applicare:

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

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

Tuttavia, questo ridimensiona l'intera immagine per adattarla all'area allocata, quindi se si utilizza uno sprite, ciò potrebbe causare problemi.

Specifica: AlphaImageLoader Filter @microsoft

Ho creato jquery.backgroundSize.js : un plugin jquery da 1,5 KB che può essere utilizzato come fallback IE8 per i valori "cover" e "contenere". Dai un'occhiata alla demo .

Grazie a questo post, il mio css completo per la felicità tra browser è:

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

È passato tanto tempo da quando ho lavorato su questo pezzo di codice, ma vorrei aggiungere una maggiore compatibilità con il browser. L'ho aggiunto al mio CSS per una maggiore compatibilità con il browser:

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

Anche più tardi, ma anche questo potrebbe essere utile. Esiste il plug-in jQuery-backstretch che puoi usare come polyfill per la dimensione dello sfondo: copertina. Immagino che debba essere possibile (e abbastanza semplice) afferrare la proprietà css-background-url con jQuery e inviarla al plugin jQuery-backstretch. La buona pratica sarebbe quella di testare il supporto delle dimensioni di sfondo con modernizr e utilizzare questo plugin come fallback.

Il plug-in backstretch è stato menzionato su SO qui . Il sito jQuery-backstretch-plugin è qui .

In modo simile potresti creare un plugin o uno script jQuery che faccia funzionare la dimensione dello sfondo nella tua situazione (dimensione dello sfondo: 100%) e in IE8-. Quindi, per rispondere alla tua domanda: Sì, c'è un modo, ma atm non esiste una soluzione plug-and-play (cioè devi fare un po 'di codice da solo).

(disclaimer: non ho esaminato a fondo il plug-in backstretch ma sembra fare lo stesso di background-size: cover)

C'è un buon polyfill per questo: louisremi / background-size-polyfill

Per citare la documentazione:

Carica backgroundsize.min.htc sul tuo sito web, insieme al file .htaccess che invierà il tipo mime richiesto da IE (solo Apache - è integrato in nginx, node e IIS).

Ovunque usi la dimensione dello sfondo nel tuo CSS, aggiungi un riferimento a questo file.

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

In IE11 Windows 7 questo ha funzionato per me,

background-size: 100% 100%;

puoi usare questo file ( https://github.com/louisremi/background-size-polyfill "polyfill di sfondo") per IE8 che è davvero semplice da usare:

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

Ho provato con il seguente 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;
}

Ha funzionato per me!