Alternativa per sfondo: copertina in IE7 +

Ho un’immagine di sfondo sul corpo della mia pagina web. Ho usato la background-size:cover modo che l’immagine si estenda attraverso il corpo pur mantenendo le proporzioni dell’immagine. Mi piacerebbe che fosse lo stesso per IE7 + IE8.

Mi sono guardato intorno e ho visto il seguente codice:

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='AutumnWinter_4.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='AutumnWinter_4.jpg', sizingMethod='scale')"; 

Ma questo non preserva le proporzioni, il che è davvero negativo per il sito web a cui miriamo.

C’è un modo per fare questo? Senza colpire jQuery?

backgroundSize.js non estenderà effettivamente l’immagine di bg in IE7, ma sembra centrarla solo alla dimensione originale. Guarda la loro demo e fai clic su “Verifica che cosa vedrebbero normalmente gli utenti di IE6-7-8”.


@danRhul

Ho letto che backstretch funzionerà in IE7 +

In bocca al lupo!

Qual è la ragione di non usare jQuery? Puoi caricarlo nei commenti condizionali solo per IE<8 , in modo che jQuery per ogni altro browser moderno non venga caricato.

Considera anche che IE7 ha una quota di mercato molto bassa (2,52%, aprile 2012), quindi può essere accettabile caricare ~ 25kb extra per quel browser specifico se questa funzione è così importante per il tuo sito / applicazione.

Quindi, ho trovato questo plugin per jQuery: https://github.com/louisremi/jquery.backgroundSize.js

Un cssHook di jQuery che aggiunge il supporto per "cover" e "contain" a IE6-7-8, in 1.5K

Vedi la pagina del progetto Github per maggiori informazioni.

Si potrebbe semplicemente falsificare un’immagine di sfondo con un’immagine reale. È un po ‘più di editing HTML e certamente non è l’ideale, ma da quando ha gestito IE è sempre stato l’ideale?

   
[ ... ]

Quindi modellalo di conseguenza

 body{ position:relative; } #mainBG{ width:100% position:absolute; top:0px; left:0px; } 

Dovrebbe essere cross-browser se non mi sbaglio.

Ho usato il seguente ( http://css-tricks.com/perfect-full-page-background-image/ ) e funziona bene in ie7.

HTML:

    

CSS:

 .bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } } 

So che questa è una domanda vecchia, ma ho pensato di condividere una soluzione che ho trovato per chiunque trovasse questa domanda su google, come ho fatto io.

Stavo cercando di ottenere un’immagine per coprire lo sfondo di un sito e ho trovato questa domanda, tuttavia nessuna delle soluzioni ha funzionato per me. Invece mi sono inventato questo:

HTML : sposta l’immagine di sfondo in un , rendi la prima cosa nel tuo .

    
...

CSS : fai apparire lo sfondo sotto il contenuto, imposta la sua min-width/height al 100%.

 html { height: 100% } body .background { position: absolute; z-index: -1; min-height: 100%; min-width: 100%; } 

Qui c’è l’ min-height min-width che fa la magia. Non dare all’immagine una larghezza e un’altezza nell’HTML o CSS, o le proporzioni cambieranno.

Quanto sopra funzionerà per IE7 e IE8 . Se si desidera supportare IE6 , è ansible impostare un fallback dell’immagine centrata come questa:

CSS : se IE6 , non visualizzare l’immagine, utilizzare invece un’immagine di sfondo.

 body { _background: url("http://sofit.miximages.com/html/kitty.jpg") 50% top no-repeat; } body .background { _display: none; } 

(NB Se non ti piace il trucco di sottolineatura per scegliere come target IE6 , potresti usare invece i condizionali – questo è ciò che fa l’ HTML5 Boilerplate .)

Sfortunatamente, la maggior parte delle soluzioni a questo tipo di problemi dipende da css3 o ignora la funzionalità nativa di “cover” che mantiene le proporzioni originali dell’immagine. https://github.com/louisremi/background-size-polyfill dovrebbe preservare il rapporto, ma non riuscirei mai a farlo funzionare completamente quando si estende il browser in determinati modi (errore dell’operatore, ne sono sicuro :-)). Per risolvere questo problema, ho scritto uno script jquery che ho testato su safari, chrome, ff e ie8 +. Noterai che dovrai usare una img posizionata assolutamente al posto di css background-image. Basta aggiungere bgImg come id nel tag in html.

CSS:

 .container { height: auto; overflow:hidden; position:relative;} .container #bgImg { position:absolute; z-index:-1;} 

Il selettore di immagini dovrà essere posizionato in modo assoluto per farlo sedere dietro il contenuto. Ciò significa che il contenitore genitore deve avere posizione: relativo e quindi overflow: nascosto in modo tale che qualsiasi overflow dall’immagine (dal momento che si mantiene il rapporto, alcune parti di esso saranno inevitabili) è nascosto. Si noti inoltre che alcuni tag di visualizzazione nel contenitore padre interromperanno l’occultamento dell’overflow.

jQuery:

 $(window).load(function () { // only do this once and pass as function parameters, because chrome // and safari have trouble not only with document.ready but window.resize var img = new Image(); img.src = $("#bgImg").attr('src'); var $width_orig = img.width; var $height_orig = img.height; resizeBGImage($width_orig, $height_orig); $(window).resize(function () { resizeBGImage($width_orig, $height_orig); }); }); function resizeBGImage($width_img_orig, $height_img_orig) { // get dimensions of container var $width_container = $('.container').outerWidth(); var $height_container = $('.container').outerHeight(); // calculate original aspect ratio and ratio of the container var $imageratio = $width_img_orig / $height_img_orig; var $containerratio = $width_container / $height_container; var $wdiff = $width_container - $width_img_orig; var $hdiff = $height_container - $height_img_orig; // original size, so just set to original if (($wdiff == 0) && ($hdiff == 0)) { $("#bgImg").css('width', $width_img_orig); $("#bgImg").css('height', $height_img_orig); } // if container is smaller along both dimensions than the original image, // set image to container size else if (($wdiff < 0) && ($hdiff < 0)) { $("#bgImg").css('width', $width_img_orig); $("#bgImg").css('height', $height_img_orig+1); // adding one because chrome can't do math } // if container is wider than long relatiave to original image aspect ratio // set width to container width and calculate height else if ($containerratio > $imageratio) { $("#bgImg").css('width', $width_container); // calculate height using orig aspect ratio and assign to image height $("#bgImg").css('height', (($width_container * $height_img_orig) / $width_img_orig) + 1); // adding one because chrome can't do math } // else container is taller than long relatiave to original image aspect ratio // set height to container height and calculate width else { // set the image height to container height $("#bgImg").css('height', $height_container + 1); // adding one because chrome can't do math // calculate width using orig aspect ratio and assign to image width $("#bgImg").css('width', (($height_container * $width_img_orig) / $height_img_orig)); } $("#bgImg").css('left', (($width_container - $("#bgImg").width()) / 2).toString() + 'px'); }; 

Si noti l’uso di $ (window) .load () invece di $ (document) .ready (). Chrome e Safari sembrano avere problemi con quest’ultimo poiché in quei browser, l’immagine di sfondo potrebbe non essere completamente caricata quando il DOM è. L’utilizzo di $ (window) .load () assicura che tutti gli elementi della finestra siano presenti prima dell’esecuzione dello script.

Dopo molte prove ed errori, la soluzione migliore era indovinare!

Il seguente ha funzionato per me.

 body { background-size:100%; } 

Sembra che tu abbia bisogno di uno ‘shim’ o ‘polyfill’ come Modernizer: http://modernizr.com/docs/#html5inie