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 un’immagine di sfondo. Specifica come l’immagine di sfondo deve essere ripetuta. Specifica la posizione iniziale dell’immagine di sfondo. Stabilisce se l’immagine di sfondo deve rimanere fissa o scorrere con l’elemento 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 l’area 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. L’argomento 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

1

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ù l’opacità (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 l’opacità (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ù l’arancione (orange), per un totale di 17 colori nominati.

Fig. 2 Colori nominati in HTML 4.01

E’ possibile trovare un elenco dei colori nominati all’url 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

2

Colori RGB esadecimali I CSS consentono di definire un colore utilizzando la notazione esadecimale, cioè mettendo insieme 3 numeri esadecimali nell’intervallo 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 l’opacità. 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 all’url 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à è l’intensità 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 all’url 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

3

Fig. 3 Variazione della saturazione

Colori HSLA I colori HSLA sono i colori HSL con l’aggiunta di un canale alpha, che ne specifica l’opacità. 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 all’url 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 un’immagine sullo sfondo di un elemento.

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

dove immagine può assumere i seguenti valori:  l’url dell’immagine 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, l’immagine viene posizionata nell’angolo superiore sinistro dell’elemento 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 l’immagine 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

4

Che cos’è un url?
Un URL (Uniform Resource Locator) è una stringa che identifica univocamente una risorsa in Internet, come un documento, un video, un’immagine 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 è l’indirizzo 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 all’utente una visione astratta dell’organizzazione dei file, consentendone un’agevole manipolazione.
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013

5

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 l’unità 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 l’immagine.

selettore { background-repeat: modello_ripetizione;}

dove modello_ripetizione può assumere i seguenti valori:  repeat, ripete l’immagine sia in verticale che in orizzontale;
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/10/2013

6

  

repeat-x, ripete l’immagine in orizzontale; repeat-y, ripete l’immagine in verticale; no-repeat, l’immagine non viene ripetuta (è il default).

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

 background-position
Un’immagine 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, l’altra è impostata al 50% o in modo analogo a center. Il valore di default è 0% 0%. Si veda un esempio all’url http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position

 background-attachment
Stabilisce come deve essere ripetuta l’immagine.

selettore { background-attachment: scorrimento;}

dove scorrimento può assumere i seguenti valori:  scroll, l’immagine scorre con l’elemento (è il default);  fixed, l’immagine è fissa;  local, l’immagine scorre con il contenuto dell’elemento.

3

Si veda http://www.w3schools.com/cssref/css_units.asp

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

7

Per comprendere l’utilizzo di tale proprietà, supponiamo di voler collocare in posizione centrale, all’interno 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é l’immagine scorre insieme al documento. utilizzando la proprietà {background-attachment: fixed;} l’immagine 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

8

Sign up to vote on this title
UsefulNot useful