La proprietà background dei CSS consente una certa flessibilità nell'impostazione di un sfondo, ma non è certo adatta a tutte le circostanze. I CSS3 promettono di migliorare la situazione con l'introduzione di nuove proprietà come background-size, background-clip e con il supporto per gli sfondi multipli, ma rimangono scenari per i quali al momento è necessario ricorrere a qualche astuto trucchetto.
È il caso degli sfondi a tutta pagina, quelli cioè che occupano l'intera area del viewport del browser. Il problema principale che impedisce di sfruttare la proprietà background per ottenere questo effetto ha un nome: ridimensionamento. Un'immagine inserita con il metodo classico non scala al variare delle dimensioni della finestra del browser. Il risultato è che bisogna ricorrere a immagini inline, incorporate nel codice HTML e gestite via CSS.
Uno dei metodi 'classici' adottabili per lo scopo che qui ci interessa è quello frutto della inesauribile creatività di Stu Nicholls. Ecco l'esempio originale e quello replicato per questo articolo. Se in entrambi gli esempi provate a ridimensionare la finestra, in verticale e/o orizzontale, capirete subito il limite fondamentale della tecnica: l'immagine non mantiene le proporzioni, producendo un effetto 'distorsione' non certo gradevole.
Due metodi alternativi sono quelli proposti da Chris Coyier in questo articolo.
La prima tecnica è la riproposizione di quella adottata sul sito Ringvemedia.com. Ecco anche in questo caso un esempio riadattato che usa la stessa immagine di sfondo vista nell'esempio precedente. Si può notare che l'effetto 'distorsione' non si verifica ridimensionando la finestra.
Come si ottiene l'effetto?
A livello di markup, la cosa potrebbe far storcere il naso a qualcuno. L'immagine di sfondo viene inserita nel markup HTML all'interno di una cella di tabella a sua volta contenuta in due ulteriori div:
<div id="bg">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="bck.jpg" alt=""/>
</td>
</tr>
</table>
</div>
</div>Dal momento che è un elemento, diciamo 'accessorio', rispetto ai contenuti della pagina propriamente detti, è bene inserire questa parte in fondo alla pagina stessa (come nell'esempio), visto che la posizione nel markup non influisce sulla resa finale dell'effetto.
Il CSS si presenta così:
* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}
#bg {
position: fixed;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}Per accomodare le cose su IE6, si usa JavaScript, grazie alla libreria MooTools e ad uno script ad hoc (core.js). I due file JS sono serviti al browser di Microsoft e non agli altri tramite i commenti condizionali. Nella sezione head troviamo infatti:
<!--[if lt IE 7]>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<![endif]-->Nel codice CSS visto c'è una cosa cruciale da far rilevare:
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}Impostare l'overflow su hidden per html e body significa tagliare tutti gli eventuali contenuti che vadano, in senso verticale, oltre l'area visibile della finestra. Tradotto in parole semplici: se si usa questa tecnica bisognerà inserire un elemento contenitore globale per il contenuto della pagina e assegnare ad esso delle regole CSS per ripristinare lo scrolling.
Nell'esempio tale contenitore è un <div> con id="cont":
<div id="cont">
<div class="box">
<!-- qui vanno i contenuti della pagina -->
</div>
</div>E queste sono le regole CSS per esso definite:
#cont {
position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
}La tecnica funziona bene su tutti i browser recenti, con qualche piccolo bug (correttamente segnalato nell'articolo) su Safari 4 e Chrome.
La seconda soluzione elimina la necessità di markup extra, ma ha come risvolto negativo il mancato funzionamento su IE6 e il fatto che l'immagine di sfondo non viene centrata su IE7. Inoltre, è consigliabile verificare il corretto proporzionamento dell'immagine quando viene ridimensionata la finestra del browser. Ecco l'esempio.
A livello HTML la cosa è più che banale. Subito dopo il tag body inseriamo l'immagine:
<img src="bck.jpg" class="bg" />E questo è il CSS commentato:
img.bg {
/* regole per riempire la pagina con lo sfondo prescelto */
min-height: 100%;
min-width: 1024px;
/* regole per ridimensionare l'immagine proporzionalmente */
width: 100%;
height: auto;
/* posizonamento dello sfondo */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
div#content {
/* regola importante per mostrare il contenuto sopra lo sfondo */
position: relative;
/* formattazione del div, non ha effetti sullo sfondo */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}
body {
/* formattazione del body, non ha effetti sullo sfondo */
margin: 0;
padding: 20px 0 0 0;
}Solo con una buona serie di test cross-browser si capirà comunque quale delle due tecniche sia la più adatta ai nostri scopi. Dopo aver selezionato un'immagine adeguata allo scopo, non solo la resa andrà verificata, ma anche altri fattori. Primo tra tutti il peso dello sfondo, oltre che per l'ovvio motivo che un'immagine siffatta tende a pesare non poco, c'è da tenere in considerazione che su certi browser, come Firefox, la finestra tende a diventare poco 'reattiva' quando la si ridimensiona in presenza di sfondi tanto consistenti in termini di kb.
Si potrà ovviamente concludere che nessuna delle tecniche qui viste sia quella giusta per noi, ma tenendo presente che le alternative valide sfruttando solo HTML e CSS scarseggiano, al punto che uno dei metodi prevalenti per ottenere sfondi a tutta pagina simili a quelli visti consiste nell'uso di filmati Flash.
Tutti gli esempi sono disponibili per il download.
