Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Le propriet CSS che permettono di impostare lo sfondo di una pagina o di un elemento sono: Propriet
background-color background-image background-repeat background-position background-attachment
Descrizione
Imposta un colore di sfondo. Imposta unimmagine di sfondo. Specifica come limmagine di sfondo deve essere ripetuta. Specifica la posizione iniziale dellimmagine di sfondo. Stabilisce se limmagine di sfondo deve rimanere fissa o scorrere con lelemento a cui associata, quando si scorre lungo il documento.
background-color
Imposta il colore di sfondo di un elemento. Il colore riempie larea del contenuto, il padding e si estende fino al limite esterno del bordo. Pertanto, i bordi che hanno sezioni trasparenti (come i bordi tratteggiati) mostreranno in parte lo sfondo. La figura seguente mostra i riquadri di un elemento html. Largomento sar approfondito quando si parler degli elementi di blocco.
LEGENDA
dove colore_sfondo pu assumere i seguenti valori: un qualsiasi colore valido; transparent. Il valore predefinito (default) transparent.
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013
E possibile trovare un elenco dei colori nominati allurl http://www.w3schools.com/cssref/css_colornames.asp. Colori RGB funzionali Come detto in precedenza, possibile definire un colore indicando la quantit di rosso, verde e blu presente. La sintassi la seguente:
Le quantit RGB possono essere espresse utilizzando numeri interi compresi tra 0 e 255 oppure mediante percentuali. Per esempio:
quantit intera rgb (255,255,255) rgb (0,0,0) rgb (255,0,255) rgb (255,102,0) quantit in percentuale rgb (100%,100%,100%) rgb (0%,0%,0%) rgb (100%,0%,100%) rgb (100%,40%,0%) nome colore bianco nero fuchsia orange colore
Colori RGB esadecimali I CSS consentono di definire un colore utilizzando la notazione esadecimale, cio mettendo insieme 3 numeri esadecimali nellintervallo 00 -FF che indicano la quantit di componenti rosso, verde e blu. La sintassi generica :
#RRGGBB
Quando gli elementi delle coppie RR, GG e BB sono uguali (es. #FF66AA) si pu utilizzare una notazione abbreviata che riporta solo un elemento di ciascuna coppia (es. #F6A). Naturalmente vi corrispondenza tra la notazione decimale e quella esadecimale: basta convertire ogni numero decimale in esadecimale. Per esempio:
notazione decimale rgb (255,255,255) rgb (0,0,0) rgb (255,0,255) rgb (255,102,0) nome colore bianco nero fuchsia orange notazione esadecimale #FFFFFF #000000 #FF00FF #FF4500
Colori RGBA I colori RGBA estendono i colori RGB con un canale alpha, che specifica lopacit. La sintassi : rgb(quantit_rosso, quantit_verde, quantit_blu, valore_alpha)
dove alpha un numero compreso tra 0.0 (trasparente) e 1.0 (opaco). Un esempio disponibile allurl http://www.w3schools.com/cssref/tryit.asp?filename=trycss_color_rgba. I colori RGBA sono supportati dai browser IE9+, Firefox 3+, Chrome, Safari e Opera 10+. Il + indica versioni successive. Colori HSL I colori HSL sono rappresentati mediante tinta, saturazione e luminosit. La sintassi : hsl(tinta, saturazione, luminosit)
La tinta corrisponde a ci che noi chiamiamo solitamente colore. La saturazione la quantit di tinta pura che deve essere mescolata al bianco per produrre il colore. La luminosit lintensit della luce. La figura 3 mostra un esempio di variazione della saturazione, a parit di tinta. La tinta pu assumere un valore compreso tra 0 e 360, dove 0 e 360 corrispondono al rosso, 120 al verde, 240 al blu. La saturazione un valore percentuale che va da 0% a 100% (il colore pieno). La luminosit espressa in percentuale da 0% (tonalit di grigio) a 100% (bianco). Un esempio disponibile allurl http://www.w3schools.com/cssref/tryit.asp?filename=trycss_color_hsl. I colori HSL sono supportati dai browser IE9+, Firefox, Chrome, Safari e Opera 10+.
Colori HSLA I colori HSLA sono i colori HSL con laggiunta di un canale alpha, che ne specifica lopacit. La sintassi : hsl(tinta, saturazione, luminosit, alpha)
Anche in questo caso, come per i colori RGBA, alpha un numero compreso tra 0.0 (trasparente) e 1.0 (opaco). Un esempio disponibile allurl http://www.w3schools.com/cssref/tryit.asp?filename=trycss_color_hsla. I colori HSL sono supportati dai browser IE9+, Firefox3+, Chrome, Safari e Opera 10+.
background-image
Posiziona unimmagine sullo sfondo di un elemento.
dove immagine pu assumere i seguenti valori: lurl dellimmagine o il suo pathname; none ( il valore di default). Si possono specificare pi immagini di sfondo separando gli url con virgole. Questa funzionalit non supportata da IE8. Se non diversamente specificato, limmagine viene posizionata nellangolo superiore sinistro dellelemento ed ripetuta sia orizzontalmente che verticalmente fino a riempire completamente lo spazio a disposizione. Quando si usano immagini come sfondo di un elemento consigliabile impostare sempre un colore di sfondo, che sar visualizzato nel caso in cui limmagine non sia accessibile. Le immagini vengono disposte sopra qualsiasi colore di sfondo. Tuttavia, alcuni formati immagine, come il PNG, possono essere parzialmente o interamente trasparenti e questo permette di ottenere una combinazione tra immagine e colore di sfondo.
1 2
Si veda http://it.wikipedia.org/wiki/Uniform_Resource_Locator Componente del sistema operativo che si occupa della gestione e organizzazione dei file; fornisce allutente una visione astratta dellorganizzazione dei file, consentendone unagevole manipolazione.
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013
La figura 4 mostra una porzione di file system con una cartella Lezione - contenente due sottocartelle - Codice e Immagini - e il file pdf tagFondamentali. Le sottocartelle Codice e Immagini contengono rispettivamente i file esempio.html e background.jpg. Il pathname dei file pu essere espresso in due modi: assoluto, cio a partire dalla radice (root) del file system, solitamente lunit C nei sistemi Windows o / nei sistemi Unix like; relativo, cio a partire dalla cartella nella quale ci troviamo correntemente (la cartella corrente). Il pathname assoluto dei file della figura 4 specifica il percorso che bisogna seguire per raggiungerli a partire da C. Ogni cartella del percorso separata da quella pi interna mediante un separatore, che diverso a seconda del sistema operativo in uso. Per esempio, il separatore nei sistemi Windows il back-slash (\), mentre nei sistemi Unixlike lo slash (/). In un sistema Windows, pertanto si ha: pathname assoluto di esempio.html C:\Lezione\Codice\esempio.html pathname assoluto di background.jpg C:\Lezione\Immagini\background.jpg pathname assoluto di tagFondamentali.pdf C:\Lezione\tagFondamentali.pdf Supponiamo che la cartella corrente sia Lezione; il pathname relativo dei file : pathname relativo di esempio.html esempio.html pathname relativo di background.jpg Immagini\background.jpg pathname relativo di tagFondamentali.pdf tagFondamentali.pdf Se la cartella corrente Codice, si ha: pathname relativo di esempio.html esempio.html Per accedere agli altri file bisogna tornare su alla cartella Lezione. Si utilizzano due punti (..) per indicare la cartella superiore. Il punto (.), invece, rappresenta la directory corrente, cio Codice. pathname relativo di background.jpg ..\Immagini\background.jpg pathname relativo di tagFondamentali.pdf ..\tagFondamentali.pdf Analogamente, se la cartella corrente Immagini, si ha: pathname relativo di background.jpg background.jpg Per accedere agli altri file bisogna tornare su alla cartella Lezione. pathname relativo di esempio.html ..\Codice\esempio.html pathname relativo di tagFondamentali.pdf ..\tagFondamentali.pdf
background-repeat
Stabilisce come deve essere ripetuta limmagine.
dove modello_ripetizione pu assumere i seguenti valori: repeat, ripete limmagine sia in verticale che in orizzontale;
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013
repeat-x, ripete limmagine in orizzontale; repeat-y, ripete limmagine in verticale; no-repeat, limmagine non viene ripetuta ( il default).
background-position
Unimmagine di sfondo pu essere posizionata in molti modi diversi.
dove posizione_x e posizione_y possono assumere una delle seguenti combinazioni di valori, il cui significato evidente: left top; left center; left-bottom; right top; right center; right bottom; center top; center center; center bottom. Le due posizioni, orizzontale e verticale, possono anche essere espresse in percentuali, in pixel (px) o utilizzando una qualsiasi altra unit di misura CSS3 o una loro combinazione. Nel caso si indichi una sola posizione, laltra impostata al 50% o in modo analogo a center. Il valore di default 0% 0%. Si veda un esempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position
background-attachment
Stabilisce come deve essere ripetuta limmagine.
dove scorrimento pu assumere i seguenti valori: scroll, limmagine scorre con lelemento ( il default); fixed, limmagine fissa; local, limmagine scorre con il contenuto dellelemento.
Si veda http://www.w3schools.com/cssref/css_units.asp
Per comprendere lutilizzo di tale propriet, supponiamo di voler collocare in posizione centrale, allinterno di un documento lungo, una immagine. Questa, inizialmente, non sar visibile. Lo diventer quando il lettore si sar spostato nel documento fino a giungere alla posizione centrale. Questo accade perch limmagine scorre insieme al documento. utilizzando la propriet {background-attachment: fixed;} limmagine sar sempre visibile.
Riferimenti
E. A. Meyer, Cascading Style Sheets - La guida completa, Hops Libri, 2007 W3schools, http://www.w3schools.com/css3/css3_backgrounds.asp
Quest'opera distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia.