No. 100

Titolo originale: Supersize that background, please!

Pubblicato in: Browser, CSS

Scritto da Bobby van der Sluis

Con il mondo della pubblicità così smanioso di utilizzare ogni centimetro di qualsiasi medium per il brand o per la product experience, sta diventando sempre più popolare la scelta di creare siti web con background che occupano tutta la finestra del browser. Usando i CSS, si può ottenere questo risultato piuttosto facilmente. Basta semplicemente inserire un'immagine di background gigante in una pagina con una riga di codice (Gli a-capo sono marcati da » —Ed.):

  
body {
background: #000 url(myBackground_1280x960.jpg) »
center center fixed no-repeat;
}

L'esempio uno mostra un'immagine di background centrata di 1280x960 pixel che è "fissata" all'area di visualizzazione (non scorre con il documento).

Ma quale sarà la dimensione “grande abbastanza” per l'immagine? I monitor ed i sistemi operativi si sono evoluti rapidamente e come risultato c'è un grande range di risoluzioni di schermo disponibili. Le risoluzioni oggi più diffuse sono 1024x768px, 1280x800px, 1280x1024px e 1440x900px. Tuttavia, con l'avvento degli schermi HD (1920x1080px) ed i display professionali che supportano risoluzioni fino a 2560x1600px, quasi tutto è possibile.

Inoltre, c'è anche il caso delle risoluzioni più basse da considerare: molte persone ridimensionano la finestra del browser perché stia in una certa percentuale del loro schermo, mentre un range di schermi moderni supporta solo la risoluzione 800x600px. E questo lascia molti device mobili con risoluzioni inferiori fuori dall'equazione.

Invece di usare una misura fissa per il background, una soluzione migliore consisterebbe nello scalare l'immagine affinché stia nelle diverse dimensioni della finestra. Sfortunatamente, CSS 2.1 non ha mezzi per scalare le immagini di background.

Ci sono un paio di workaround, che tuttavia dipendono dall'elemento img di HTML (invece che dai background CSS). Per di più, usano il posizionamento assoluto per la disposizione a layer e le tabelle, o degli script per abilitare il ridimensionamento. In aggiunta, non tutte queste tecniche mantengono il rapporto altezza-larghezza dell'immagine, il che risulta in background allungati in maniera non realistica.

I background CSS3 ci vengono in soccorso

Il W3C CSS Background and Borders Module Level 3 (attualmente una working draft) definisce la proprietà background-size che calza a pennello sulle nostre richieste. I valori interessanti (per citare la specifica W3C) sono:

contain
Scala l'immagine, preservandone l'intrinseco rapporto larghezza-altezza (se c'è), alla dimensione più grande, così che sia la sua larghezza sia la sua altezza vadano bene all'interno dell'area di posizionamento del background.
cover
Scala l'immagine, preservandone l'intrinseco rapporto larghezza-altezza (se c'è), alla dimensione più piccola così che sia la sua larghezza sia la sua altezza possano coprire completamente l'area di posizionamento del background.

Contain fa sempre stare l'intera immagine all'interno della vostra viewport, lasciando dei bordi opachi sia su top-bottom sia su left-right ogni volta che il rapporto dell'immagine di background e la finestra del browser non è uguale. Nell'esempio due abbiamo esteso il codice dell'esempio uno impostando la proprietà background-size a contain.

Cover riempie sempre la finestra del browser, tagliando un po' di dettagli nel processo, che è quel che personalmente preferisco per la maggior parte dei casi. Potete controllare come la vostra immagine viene allineata all'interno della viewport usando la proprietà background-position. Nell'esempio tre abbiamo di nuovo esteso l'esempio uno, questa volta impostando la proprietà background-size a cover.

Si abilita il ridimensionamento del background aggiungendo le seguenti dichiarazioni allo stylesheet:

     
body {
background: #000 url(myBackground_1280x960.jpg) »
center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}

La proprietà background-size è già supportata in Firefox 3.6 (usando il prefisso -moz; Firefox 4 utilizzerà la proprietà CSS3 regolare), Chrome 5, Safari 5 e Opera 10.54; verrà inoltre inclusa in Internet Explorer 9 (è già disponibile nella Preview 3). Le versioni più vecchie di WebKit e Opera supportano già la proprietà background-size, sebbene queste implementazioni siano basate su draft precedenti che non includevano le keyword contain e cover.

Lo svantaggio di questo metodo è che non c'è alcuna proprietà per il background disponibile per impostare una larghezza o un'altezza minima. Quando si ridimensiona la finestra del browser ad una dimensione molto piccola di altezza o larghezza, l'immagine di background si scalerà fino a raggiungere una dimensione molto piccola: comportamento spesso indesiderato.

Aggiungere le media query di CSS3 all'impasto

Il W3C CSS3 Media Queries Module (una candidate recommendation) definisce le regole condizionali che si applicano solo all'interno di determinati range di larghezza o altezza. Questo ci permette di implementare il ridimensionamento del background da una larghezza e altezza minima e così via. Le media query sono supportata da Firefox 3.5, Chrome, Safari 3 e Opera 7, e saranno anche incluse in Internet Explorer 9.

Aggiungendo le seguenti regole di stile diremo al browser che non vogliamo che l'immagine di background si scali ad una dimensione inferiore ai 1024x768 pixel:

  
body {
background: #000 url(myBackground_1280x960.jpg) »
center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}

@media only all and (max-width: 1024px) and (max-height: 768px) {
body {
-moz-background-size: 1024px 768px;
background-size: 1024px 768px;
}
}

Notate che 1024x768px ha lo stesso rapporto dell'immagine di background (1280x960px). Quando usate rapporti diversi otterrete salti improvvisi nello scaling quando ridimensionerete la finestra del browser.

Nei nostri ultimi esempi, quattro e cinque, abbiamo aggiunto la regola @media, così che l'immagine di background non si scali a meno di 1024x768 pixel. L'esempio cinque mostra che impostando la proprietà background-position a left-bottom invece che center-center, possiamo controllare il modo in cui l'immagine di background è allineata all'interno della viewport.

Rivisitazione delle vecchie tecniche

Stiamo vivendo in un periodo particolarmente vivace per i web developer, con tutti i produttori di browser che lavorano alla clemente per implementare le nuove tecnologie HTML5 e CSS3. Come risultato, è ora di rivedere le vecchie tecniche per capire come si possano ottenere gli stessi risultati in maniera più intelligente e pulita. Mentre i cicli di upgrade di Firefox, Chrome, Safari e Opera sono relativamente brevi, sarà interessante vedere quanto tempo ci metteranno le persone ad adottare Internet Explorer 9, così che possiamo cominciare ad usare molte di queste tecniche su larga scala al più presto.

Illustrazioni dell'articolo: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Bobby van der Sluis

Bobby van der SluisBobby van der Sluis lavora come Technical Experience Director presso Blast Radius ad Amsterdam, Olanda. È un grande fan sia degli standard web sia di Flash ed occasionalmente sente l'urgenza di scrivere riguardo a questi argomenti sul suo sito personale o per un magazine online.