Inserire immagini di sfondo in una pagina web con CSS
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.
Primo, è 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
| Attributo | Funzione |
|---|---|
| repeat | Ripetere l’immagine |
| no-repeat | Non ripetere l’immagine |
| repeat-x | Ripetere l’immagine solo in orizzontale (asse x) |
| repeat-y | Ripetere 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
| Attributo | Funzione |
|---|---|
| scroll | L’immagine di sfondo scorre insieme alla pagina |
| fixed | L’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
| Attributo | Funzione |
|---|---|
| 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
Leave a Comment
Devi essere connesso per inviare un commento.
Ecco un altro articolo interessante: https://css-tricks.com/almanac/properties/b/background-size/
Questo blog in italiano spiega chiaramente come inserire un’immagine di sfondo a pieno schermo: http://www.minimamente.com/full-background-image-con-css-e-quindi-responsive/
Bel post Michele, complimenti! Cosa ne pensi dei siti one-page a proposito? Forse cominciano ad essere un po’ troppi secondo me…
Benvenuto nel blog, Corrado!
Sono una soluzione interessante quando non si hanno pagine e pagine di testo da inserire e si vuole vendere qualche servizio o un’app.