Gestione dello sfondo | Guida CSS

Gestione dello=20 sfondo

Esamineremo in questa lezione le propriet=E0 relative = alla gestione=20 dello sfondo. Sin dalle origini di HTML =E8 stato possibile = definire=20 un colore o un'immagine di sfondo per le nostre pagine web. = La=20 scelta si restringe comunque a due elementi: il corpo = principale=20 della pagina (<BODY>) o le tabelle. Un'altra=20 limitazione riguarda il comportamento delle immagini di = sfondo: esse=20 vengono infatti ripetute in senso orizzontale e verticale = fino a=20 riempire l'intera area della finestra, del frame o della = tabella.=20 Proprio questo comportamento ha fatto sempre propendere per = la=20 scelta di piccole textures in grado di dare la sensazione = visiva=20 dell'uniformit=E0. Grazie ai CSS queste limitazioni vengono = spazzate=20 via e le possibilit=E0 creative, compatibilit=E0 = permettendo, sono=20 davvero infinite.

Ecco la lista delle propriet=E0, applicabili, ed =E8 = questa la prima=20 grande innovazione dei CSS, a tutti gli elementi:

background-color=20
background-image=20
background-repeat=20
background-attachment=20
background-position

Ciascuna di essa definisce un solo, particolare aspetto = relativo=20 allo sfondo di un elemento. La propriet=E0 = background, invece,=20 =E8 una propriet=E0 a sintassi abbreviata con cui possiamo = definire=20 sinteticamente e con una sola dichiarazione tutti i valori = per lo=20 sfondo. La analizeremo alla fine. Prima =E8 necessario = chiarire=20 significato e sintassi delle propriet=E0 singole.

background-color

Definisce il colore di sfondo di un elemento. Questa = propriet=E0=20 non =E8 ereditata.

Sintassi

selettore {background-color: = <valore>;}

Valori

un qualunque colore=20
la parola chiave transparent

Usando transparent come valore un elemento avr=E0 = come=20 colore quello dell'elemento parente. Nell'esempio: il colore di #div2 =E8 = impostato su=20 transparent, per cui esso sar=E0, per l'appunto, = trasparente,=20 lasciando emergere il colore dell'elemento parente = (#div1).

Esempi

body { background-color: white; }
p {=20 background-color: #FFFFFF; }
.classe1 { background-color: = rgb(0,=20 0, 0)

background-image

Definisce l'URL di un'immagine da usare come sfondo di un = elemento. Questa propriet=E0 non =E8 ereditata.

Sintassi

selettore { background-image: = url(<valore>);=20 }

Valori

un URL assoluto o relativo che punti ad = un'immagine=20
la parola chiave none. Valore di default. =

Usare none equivale a non impostare la = propriet=E0: nessuna=20 immagine verr=E0 applicata come sfondo.

Esempi

body {background-image: url(sfondo.gif); = }
div=20 body {background-image: = url(http://www.server.it/images/sfondo.gif);=20 }

Usando questa propriet=E0 da sola si ottiene lo stesso = risultato=20 che in HTML si aveva con l'attributo background (vedi = esempio).

Piccolo consiglio. Una buona norma e il buon senso = vogliono che=20 quando si definisce un'immagine come sfondo si usi sempre = anche un=20 colore di sfondo e che questo colore consenta una lettura = agevole=20 del testo. Se le immagini sono disabilitate, ad esempio, il = browser=20 mostrerebbe il suo colore di sfondo predefinito: se questo = =E8 bianco=20 e il nostro testo pure sarebbe evidentemente un disastro.=20 Attenzione, dunque!

background-repeat

Con questa propriet=E0 iniziano le novit=E0. Essa = consente di=20 definire la direzione in cui l'immagine di sfondo viene = ripetuta.=20 Propriet=E0 non ereditata.

Sintassi

selettore {background-repeat: = <valore>;}

Valori

repeat. L'immagine viene ripetuta in = orizzontale e=20 verticale. E' il comportamento standard.=20
repeat-x. L'immagine viene ripetuta solo in=20 orizzontale.=20
repeat-y. L'immagine viene ripetuta solo in = verticale.=20
no-repeat. L'immagine non viene ripetuta. =

L'esempio riporta i quattro diversi = comportamenti=20 con un'immagine di sfondo applicata ad una tabella.

Esempi

body { background-image: url(sfondo.gif);=20 background-repeat: repeat; }
div { background-image:=20 url(sfondo.gif); background-repeat: repeat-x; }

background-attachment

Con questa propriet=E0 si imposta il comportamento = dell'immagine di=20 sfondo rispetto all'elemento cui =E8 applicata e all'intera = finestra=20 del browser. Si decide, in pratica, se essa deve scorrere = insieme al=20 contenuto o se deve invece rimanere fissa. Propriet=E0 non=20 ereditata.

Sintassi

selettore {background-attachment:=20 <valore>;}

Valori

scroll. L'immagine scorre con il resto del = documento=20 quando si fa lo scrolling della pagina (esempio)=20
fixed. L'immagine rimane fissa mentre il = documento=20 scorre (esempio)

Questa propriet=E0 consente risultati estetici di grande = impatto ed=20 =E8 consigliabile, per ottenerne il meglio, usarla sia in = combinazione=20 con le altre propriet=E0 sia con immagini grandi.

Esempi

body { background-image:=20 url(back_400.gif);
background-repeat: repeat-x;=20
background-attachment: fixed; }

background-position

Propriet=E0 un p=F2 complessa. Definisce il punto in cui = verr=E0=20 piazzata un'immagine di sfondo non ripetuta o da dove = inizier=E0 la=20 ripetizione di una ripetuta. Si applica solo agli elementi = blocco o=20 rimpiazzati. Attenzione alla compatibilit=E0 e alla resa, = non=20 omogeena, tra i vari browser. Propriet=E0 non ereditata.

Sintassi

selettore {background-position: = <valore> o=20 <valori>;}

Valori

I valori possibili sono diversi. Tutti per=F2 definiscono = le=20 coordinate di un punto sull'asse verticale e su quello = orizzontale.=20 Ci=F2 pu=F2 avvenire nei seguenti modi:

con valori in percentuale=20
con valori espressi con unit=E0 di misura=20
con le parole chiave top, left, = bottom,=20 right

L'esempio render=E0 tutto pi=F9 chiaro. Per questo documento di esempio abbiamo = usato queste=20 impostazioni:

body {
background-image:=20 url(back_400.gif);
background-repeat:=20 no-repeat;
background-position: 50px 50px;
}

Significa che l'immagine apparir=E0 a 50px dal bordo = superiore e a=20 50px da quello sinistro della finestra. Potevo usare invece = dei=20 pixel altre unit=E0 di misura o percentuali. Come al solito, = la scelta=20 delle percentuali mi assicura una maggiore affiidabilit=E0 a = risoluzioni diverse. Allo stesso modo potevo utilizzare le = parole=20 chiave. Se, ad esempio, uso:

body {
background-image:=20 url(back_400.gif);
background-repeat:=20 no-repeat;
background-position: center center;
}

l'immagine di sfondo apparir=E0 centrata in entrambe le = direzioni=20 (esempio).

Logica vuole, trattandosi di definire le coordinate che = si=20 impostino due valori. Definendone uno solo esso sar=E0 usato = sia per=20 l'asse orizzontale che per quello verticale.

background

E veniamo alla propriet=E0 background. Con essa,=20 ricordiamolo, possiamo definire in un colpo solo tutti gli = aspetti=20 dello sfondo. Per essere valida, la dichiarazione non deve = contenere=20 necessariamente riferimenti a tutte le propriet=E0 viste = finora, ma=20 deve contenere almeno la definizione del colore di=20 sfondo.

Sintassi

selettore {background: background-color=20 background-image background-repeat background-attachment=20 background-position;}

I valori non vanno separati da virgole. L'ordine non =E8=20 importante, ma quello dato =E8 il pi=F9 logico e andrebbe = rispetatto: si=20 va in ordine di importanza.

Esempi

In questa pagina di esempio lo sfondo della = pagina =E8=20 stato cos=EC settato con l'uso della propriet=E0 = background:

body {
background: white = url(sfondo.gif) repeat-x=20 fixed;
}

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =