Sei sulla pagina 1di 8

Sfondi con i CSS

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.

Vediamo le cinque propriet nel dettaglio.

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

Area di contenuto Padding Margini

Fig. 1 Riquadri di un elemento html

selettore {background-color: colore_sfondo;}

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

Valori validi per i colori


I computer creano i colori combinando differenti livelli di rosso (red), verde (green) e blu (blue) e questo il motivo per cui si parla di colori RGB. Esistono 6 modi di esprimere i colori: 1. utilizzando un nome (colori nominati); 2. specificando una percentuale o un valore compreso tra 0 e 255, per le componenti rosso, verde e blu del colore (colori RGB funzionali); 3. specificando le tre componenti RGB mediante numeri esadecimali (colori RGB esadecimali); 4. specificando le componenti RGB pi lopacit (colori RGBA, dove A sta per Alpha); 5. specificando le coordinate cilindriche del colore, cio la tinta, la saturazione e la luminosit (colori HSL, Hue Saturation Lightness); 6. specificando la tinta, la saturazione, la luminosit e lopacit (colori HSLA). Colori nominati I colori nominati sono 140 colori, di cui 17 standard, ai quali stato assegnato un nome (in inglese). Nella figura seguente sono rappresentati i 16 colori definiti da HTML 4.01. Le specifiche CSS 2.1 definiscono gli stessi colori pi larancione (orange), per un totale di 17 colori nominati.

Fig. 2 Colori nominati in HTML 4.01

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:

rgb(quantit_rosso, quantit_verde, quantit_blu)

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

Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013

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+.

Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013

Fig. 3 Variazione della saturazione

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.

selettore { background-image: url(immagine);}

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.

Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013

Che cos un url?


Un URL (Uniform Resource Locator) una stringa che identifica univocamente una risorsa in Internet, come un documento, un video, unimmagine collocati su un server. Il formato di un URL comprende sei parti, di cui solo 2 obbligatorie1. La sua forma pi essenziale la seguente protocollo://nomehost/percorso protocollo descrive il protocollo (http, https, ftp, ) da utilizzare per accedere al server; nomehost lindirizzo del server, espresso con un nome di dominio (es. www.youtube.com) o con un indirizzo IP (es. 173.194.35.37); percorso il pathname della risorsa ossia la posizione che occupa nel file system2 del server; il percorso opzionale e, nel caso in cui non sia specificato, viene restituito un file predefinito.

Due parole sul pathname di un file


I file che risiedono sul disco fisso di un computer o su qualsiasi altro supporto di memoria secondaria vengono identificati da un percorso o pathname, che specifica in modo preciso la loro posizione. Il concetto di pathname si basa sulla struttura gerarchica del file system. Tutti noi usiamo, per archiviare e organizzare i file, un sistema di cartelle e sottocartelle (directory e sub-directory).

Fig. 4 Un esempio di file e cartelle

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.

selettore { background-repeat: modello_ripetizione;}

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).

Si veda un esempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-repeat.

background-position
Unimmagine di sfondo pu essere posizionata in molti modi diversi.

selettore { background-position: posizione_x posizione_y;}

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.

selettore { background-attachment: scorrimento;}

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

Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013

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.

Sintassi abbreviata per la propriet background


La propriet background permette di definire tutte le propriet dello sfondo con un unica regola.

selettore { background: colore immagine repeat posizione scorrimento;}

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.

Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013