Sfondi a tutta pagina con i CSS

20 ottobre 2009

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]-->
Se vuoi aggiornamenti su Sfondi a tutta pagina con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Sfondi a tutta pagina con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy