Immagini di sfondo multiple con i CSS3

Le nuove specifiche CSS3 definiscono nuove proprietà per gli sfondi e potenziano quelle esistenti. In questo primo articolo dedicato all'argomento, vedremo come sfruttare la possibilità di definire più immagini per gli sfondi grazie alla ridefinizione della proprietà background-image.

Immagini di sfondo multiple

I CSS2 prevedono che ad un elemento possa essere assegnata una sola immagine di sfondo. I CSS3, invece, abbattono questo limite, consentendo agli sviluppatori di avere immagini di sfondo multiple.

Ecco un esempio di codice che mostra come definire le immagini:

div {
background-image: url(immagine1.png), url(immagine2.png)
}

Come si vede, i valori relativi all'URL di ciascuna immagine vanno separati da una virgola.

La specifica chiarisce poi un fattore decisivo: le immagini di sfondo vengono visualizzate su livelli diversi. L'immagine definita per prima nella lista apparirà sul primo livello, la seconda su un livello posto dietro al primo, etc. Il meccanismo è simile a quello che regola la proprietà z-index. La cosa è rilevante, ad esempio, nel caso di immagini che vadano a sovrapporsi o nel caso si utilizzino texture.

Per esempio, in questa demo presentata sul sito di Dev.Opera, l'immagine del paesaggio è è stata definita come terza e ultima: se fosse stata definita come prima della lista avrebbe coperto le altre due.

Per un caso pratico, con esempio allegato, si può fare riferimento a questo nostro articolo.

Un ulteriore elemento da tenere in considerazione è il modo in cui le singole immagini usate come sfondo vanno definite rispetto ad altre proprietà come background-position, background-repeat, etc. Nel contesto del modulo, è quanto viene chiariro nella sezione Layering multiple background images.

Riprendiamo lo snippet di codice precedente e impostiamo, oltre all'URL delle immagini, anche il loro posizonamento e il comportamento rispetto alla ripetizione:

div {
background-image: url(immagine1.png), url(immagine2.png)
background-position: top left, 20% 80%;
background-repeat: no-repeat, no-repeat;
}

Non è complicato. Il primo valore per background-position (top left) definisce il posizionamento della prima immagine della lista (immagine1.png; il secondo valore (separato dal primo con una virgola), definisce il posizionamento della seconda immagine, e così via. Lo stesso vale per background-repeat. Attenzione sempre all'ordine dunque!

Esempi

Facciamo un esempio concreto: si supponga di dover creare un menu a tab con angoli arrotondati il cui colore di sfondo cambi al passaggio del mouse. Seguendo i CSS2, si dovrebbe avere una marcatura come la seguente:

<div id="navigation">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Articoli</span></a></li>
</ul>
</div>

Come si può notare anche osservando l'esempio, siamo stati costretti ad inserire un elemento superfluo a cui assegnare l'immagine di sfondo che andrà a completare il layout della tab. Con i CSS3 tutto questo non è più necessario: possiamo infatti assegnare le due immagini di sfondo direttamente all'elemento a, in questo modo:

#navigation a {
      float:left;
      background-image: url("img/tableft.gif"), url("img/tabright.gif");
      background-position: 0 0, 100% 0;
      background-repeat: no-repeat;
      margin:0;
      padding: 5px 15px 4px 11px;
      color:#24618e;
      text-decoration:none;
      font-weight: bold;
      display: block;
}
#navigation a:hover {
      background-position: 0% -42px, 100% -42px;
      color: #fff;
}

Osservando il nuovo esempio, capiamo che la novità sta nel fatto che è ora possibile accorpare più dichiarazioni di stile separate da virgole (queste ultime, lo ribadiamo, sono fondamentali). Nel nostro esempio non abbiamo usato la notazione abbreviata background, perché alcuni browser che supportano gli sfondi CSS3 sembrano avere dei problemi con questa dichiarazione quando viene usata con valori multipli.

Ancora: ricordate il problema della creazione di un box con i quattro angoli arrotondati? Il nostro Alessandro Fulciniti propose la soluzione NiftyCorners, estremamente efficace. Questa soluzione evita di dover annidare più elementi al fine di assegnare un'immagine di sfondo a ciascuno di essi, ossia di avere una marcatura come la seguente:

<div id="box">
   <div id="box-top-right">
         <div id="box-bottom-left">
	 <div id="box-content">
	 ...
	 </div>
          </div>
   </div>
</div>

L'esempio funziona come ci si attenderebbe, ma la marcatura è ridondante e assolutamente
non semantica. Possiamo eliminare tutti quei div annidati usando le nuove funzionalità CSS3 nel seguente modo:

#box {
  width: 240px;
 background-color: #d16c00;
 background-image: url("img/topleft.gif"), url("img/topright.gif"), url("img/bottomleft.gif"), url("img/bottomright.gif");
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0,  0 100%, 100% 100%;
  color: #fff;
  padding: 10px;
}

Il nuovo esempio mostra come abbiamo eliminato ben tre elementi superflui, restituendo alla marcatura la giusta semantica.

Supporto dei browser

Ecco la tabella riassuntiva relativa al supporto dei browser per gli sfondi multipli:



Non supportati	Firefox 3.6 e versioni successive	Safari 3.1 e versioni successive	Chrome 2.0 e versioni successive	Opera 10.5 e versioni successive

Conclusioni

I file degli esempi sono tutti disponibili per il download. Per altri esempi d'uso e per ottenere una compatibilità corss-browser grazie a Javascript/jQuery, si può fare riferimento al già citato articolo Implementare i CSS3 con jQuery.