CSS: immagini di sfondo multiple

I CSS3 consentono di avere immagini di sfondo multiple associate agli elementi di un documento. La sintassi delle proprietà relative agli sfondi è rimasta invariata: quello che è stato cambiato è semplicemente l'aggiunta di una virgola come delimitatore tra i valori multipli di tali proprietà. In questo articolo vedremo come applicare queste nuove caratteristiche al caso particolare dell'header di un sito web.

Abbiamo la seguente marcatura:

<div id="branding">
	<h1><span>Sito</span></h1>
</div>

a cui associamo i seguenti stili:

body {
	margin: 0;
	padding: 0;
	background: #666;
}

#branding {
	height: 220px;
	background: url(header.jpg) repeat-x;
}

#branding h1 {
	height: 100%;
	margin: 0 auto;
	width: 80%;
	background: url(header_left.jpg) no-repeat 0 0,
	            url(header_right.jpg) no-repeat 100% 0,
	            url(balloons.gif) no-repeat 50% 50%;
	font: normal 2em "Trebuchet MS", Trebuchet, sans-serif;
	color: #fff;
	text-indent: 1.5em;
	text-transform: uppercase;
}

#branding h1 span {
	position: relative;
	top: 0.5em;
}

La regola rilevante è la seguente:

#branding h1 {
	height: 100%;
	margin: 0 auto;
	width: 80%;
	background: url(header_left.jpg) no-repeat 0 0,
	            url(header_right.jpg) no-repeat 100% 0,
	            url(balloons.gif) no-repeat 50% 50%;
	font: normal 2em "Trebuchet MS", Trebuchet, sans-serif;
	color: #fff;
	text-indent: 1.5em;
	text-transform: uppercase;
}

Notate come la proprietà background accetti ora valori multipli separati da virgole. Usando questa caratteristica dei CSS3 evitiamo di dover usare elementi annidati a cui associare le immagini di sfondo specificate sopra. Inoltre, notate come le immagini vengono posizionate tramite la proprietà background-position: la prima a destra, la seconda a sinistra e la terza al centro.

Tuttavia, Internet Explorer 8 ed inferiori non supportano questa caratteristica dei CSS3.

Potete visionare l'esempio finale in questa pagina.