Inserire immagini di sfondo in una pagina web con CSS

 In Web design

In molti siti web, da qualche parte si trovano spesso immagini di sfondo (“background image”), che sia nell’intestazione o nel footer. Una foto, un’illustrazione o un effetto parallax, le applicazioni possono essere variegate e talvolta molto ben concepite. Un’immagine di sfondo è in effetti un file grafico (png o jpg) che viene importato in una pagina web.

Immagini Colori di sfondo

Chiariamo subito che per ottenere un colore di sfondo non si userà mai la tecnica oggetto di questo articolo (l’immagine di sfondo). Non è necessario poiché basta specificare soltanto un colore. Rapido, efficace, leggero! A titolo di curiosità, il CSS3 prevede persino le sfumature di sfondo, senza utilizzare alcuna immagine. Per non dilungarci troppo, riporto direttamente un articolo scritto da Shay Howe allo scopo.

body {
background-color: #666;
}

Per fare un esempio, quelli di eshirt.it sbagliano alla grande: usano il colore di sfondo ma anche un pattern monocromatico.

Background-image come carta da parati

Il concetto per capire l’immagine di sfondo nel CSS è paragonabile alla carta da parati. Si può appenderla in alto a sinistra, in basso a destra e eventualmente si possono prendere più pezzi in modo da ricoprire l’intera parete (anche in orizzontale o in verticale!). Il CSS si comporta allo stesso modo.

css_background-imagePrimo, è necessario creare l’elemento grafico e salvarlo nella directory del sito. In XHTML era possibile inserire un’immagine di sfondo inline nel <body>o in un <div>qualsiasi. Questo è un altro attributo decaduto in HTML5. La soluzione è puro, semplice CSS! Prendiamo come esempio un div.

<div id="header">Pellentesque a diam placerat, mollis quam vitae, sollicitudin nisl.</div>

Occorre indicare un colore di sfondo, nel caso in cui l’immagine di sfondo non si carichi. In seguito, indichiamo al browser quale file andare a cercare. Possiamo indicare come posizionare oppure se ripetere l’immagine? Sì! La sintassi completa è come segue.

#header {
background-color: #666;
background-image: url("img_tree.png");
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: right top; 
}

Background-repeat

Questo selector definisce se l’immagine si ripeta o meno nella pagina. Seguendo il paragone della carta da parati, un’immagine quadrata di 20x20px può essere ripetuta per coprire tutta la pagina, oppure potremmo ripeterla solo in orizzontale oppure in verticale.

Possibili attributi per definire background-repeat

AttributoFunzione
repeatRipetere l’immagine
no-repeatNon ripetere l’immagine
repeat-xRipetere l’immagine solo in orizzontale (asse x)
repeat-yRipetere l’immagine solo in verticale (asse y)

Background-attachment

Inoltre, possiamo fare in modo che l’immagine sia fissa oppure scrolli con la pagina. L’effetto detto “parallax” (tutorial W3 Schools), tanto in voga con i siti one page, viene ottenuto, fra le altre cose, proprio grazie ad un brillante utilizzo di background-attachment: fixed;  e di background-size: cover;!

Possibili attributi per definire background-attachment

AttributoFunzione
scrollL’immagine di sfondo scorre insieme alla pagina
fixedL’immagine di sfondo resta fissa, mentre scorre la pagina

Background-position

Infine, posizioniamo l’immagine di sfondo sulla pagina. Possiamo centrarla, posizionarla all’angolo sinistro superiore, ecc. Se non viene specificato nessun attributo, il browser lo interpreta come fosse “center” (centrato). È possibile specificare questo attributo anche tramite valori in px o in percentuale.

Possibili attributi per definire background-position

AttributoFunzione
left top
left center
left bottom
In alto a sinistra
A sinistra e centrato
A sinistra e in basso
right top
right center
right bottom
In alto a destra
A destra e centrato
A destra e in basso
center top
center center
center bottom
Al centro in alto
Al centro
A centro e in basso

Lo sapevate? Sapevatelo!

Sorpresa! Esiste anche una sintassi abbreviata per includere tutti gli attributi sotto un unico cappello. Il sito creative commons ne fa uso nel footer, mentre troviamo un esempio creativo nel sito del Sauriermuseum Aathal.

#header { 
     background: #00ff00 url("smiley.gif") no-repeat fixed center; 
 }

Considerazioni finali: leggibilità e leggerezza

In questo articolo abbiamo visto come inserire un’immagine di sfondo attraverso il CSS. L’autore di questo blog è sempre restio a far uso di background-image: url();a causa degli usi e abusi perpetrati da pseudo-designer (leggi: pattern stupidi). Puoi, ma non per forza devi. Fra i siti che ne fanno uso, trovo theiconfactory.com e learn.shayhowe.com molto ben riusciti. In primis, un’immagine di sfondo fa parte del concetto grafico. Secondo, fra immagini di sfondo ed eventuali trasparenze, il sito deve essere sempre leggibile con facilità. Terzo, il sito che si serve di immagini di sfondo deve comunque caricarsi rapidamente.

Link interessanti

I colori in HTML
Perfect Full Page Background Image
Setting Backgrounds & Gradients

Post suggeriti
Showing 4 comments

Leave a Comment

Inizia a digitare e premi Enter per effettuare una ricerca