Come applicare due immagini nello sfondo di un sito Web con i CSS

Con il passaggio a Windows 10 e l’introduzione del browser Microsoft Edge, la popolarità di Internet Explorer ha cominciato a vacillare. Mozilla Firefox e Chrome di Google sono browser molto più all’avanguardia e tengono il passo con l’introduzione di nuovi elementi in ambito CSS.

Per questo motivo sulla base di un’esperienza personale mi sono trovato in difficoltà nell’utilizzare su tutti i browser i background multipli o sfondi multipli. In pratica ad ogni elemento è possibile attribuire più immagini di sfondo ottenendo un’immagine costituita da sfondi multipli. La proprietà background image presenterà i percorsi delle immagini separate da una virgola. Tutte le altre proprietà riguardanti lo sfondo: background-size, background attachment, background-repeat, potranno essere utilizzate separandole dal segno della virgola e sempre con la stessa logica: la prima immagine rappresentata, quella a sinistra, fa riferimento all’immagine in primo piano.

Come applicare due immagini nello sfondo di un sito Web con i CSS

Quello che ho fatto per applicare due immagini nello sfondo del mio sito è stato intervenire nel CSS inserendo le seguenti righe di codice nel body:

body{color: #333;
background: url(images/bk_body.png), url(“adv/skin-amazon.jpg”);
font-family: Georgia,arial,Helvetica,sans-serif;font-size: 13px;
background-repeat: repeat-x,no-repeat;
background-position: top center !important;
background-attachment: local, fixed !important;
}

Verificando tale implementazione al mio codice con background multiplo CSS su Firefox, Chrome ed Edge, il risultato è stato ottimo, ma il problema maggiore si è verificato con Internet Explorer, che  a quanto pare non supporta i background multipli. Impostando il background-attachment su fixed su una delle due immagini, Internet Explorer lo applica anche sull’altra immagine, che invece è impostata su Local, in questo ha generato l’illeggibilità degli articoli

Ora, poiché il browser di Microsoft è ancora molto utilizzato dai possessori di Windows XP, Vista, Windows 7 e Windows 8.1 ho pensato di trovare una soluzione.

Quello che ho fatto per far funzionare bene il tutto, è stato togliere lo sfondo multiplo nel CSS per gli utenti che navigano con Internet Explorer. In pratica ho disabilitato il background multiplo su tutte le versioni di Internet Explorer 6. 7, 8, 9, 10, 11 agendo solo sul background-attachment:

body{color: #333;
background: url(images/bk_body.png), url(“adv/skin-amazon.jpg”);
font-family: Georgia,arial,Helvetica,sans-serif;font-size: 13px;
background-repeat: repeat-x,no-repeat;
background-position: top center !important;
background-attachment: local, fixed !important;
background-attachment: local\9 !important; /* apply to all ie from 8 and below */
*background-attachment: local; !important; /* apply to ie 7 and below */
_background-attachment: local; !important; /* apply to ie 6 and below */}

/*applicato per problemi con IE11 e versioni precedenti*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body{background-attachment: local !important;}
}

Se vuoi applicarlo anche su Microsoft Edge, ti basterà aggiungere queste righe di codice nel tuo CSS:

@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}

Questo prima soluzione consiste nel dichiarare regole CSS che possono essere lette solo da Internet Explorer. Ad esempio un asterisco (*) prima della proprietà del CSS o un underscore (_) come puoi ben vedere indicano le versioni di Internet Explorer. Stesso discorso vale per l’aggiunta di \9 prima del punto e virgola, ad indicare IE8 o sotto, e via dicendo. Ad esempio:

• IE8 o sotto: per scrivere le regole CSS specificamente a IE8 o sotto, aggiungere un backslash e 9 (\ 9) alla fine prima del punto e virgola.
• IE7 o sotto: aggiungere un asterisco (*) prima della proprietà CSS.
• IE6: aggiungere un sottolineatura (_) prima della proprietà.

.scatola {
Sfondo: grigio; /* standard */
Sfondo: rosa \ 9; / * IE 8 e successivi * /
* Sfondo: verde; / * IE 7 e successivi * /
_background: blu; / * IE 6 * /

Ricorda che se invece vuoi invece agire nel file HTML all’interno dell’ HEAD hai altre soluzioni.

Il commento condizionato IE è probabilmente il più utilizzato per risolvere i bug IE per versioni specifiche (IE6, IE7, IE8). Di seguito sono riportati alcuni esempi di codice per destinare gli style a differenti versioni di Internet Explorer:

<!–[if IE 8]> = IE8
<!–[if lt IE 8]> = IE7 or below
<!–[if gte IE 8]> = greater than or equal to IE8
<!–[if IE 8]>
<style type=”text/css”>
/* css for IE 8 */
</style>
<![endif]–>

<!–[if lt IE 8]>
<link href=”ie7.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

Un’altra soluzione è aggiungere una classe CSS che fa riferimento alla versione IE. Per specificare la versione di IE, utilizza la classe IE come il selettore genitore e via dicendo:

<!–[if lt IE 7 ]> <html class=”ie6″> <![endif]–>
<!–[if IE 7 ]> <html class=”ie7″> <![endif]–>
<!–[if IE 8 ]> <html class=”ie8″> <![endif]–>
<!–[if IE 9 ]> <html class=”ie9″> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html> <!–<![endif]–>

Spero che questa soluzione possa risultarti utile ed esserti di aiuto.

Per avere un approfondimento sui caratteri speciali applicati nei CSS e che identificano le versioni di IE, puoi dare un’occhiata a:

How to create an IE-Only Stylesheet

Happy Coding!