CSS all'opera: le proprietà di base
Gestione dello sfondo
Generalmente si inserisce un'immagine o un
colore di sfondo direttamente nel markup HTML. La scelta si restringe a due
elementi: il corpo principale della pagina (<body>)
o le tabelle.
Un'altra limitazione riguarda il comportamento delle immagini di sfondo in HTML:
esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire
l'intera area della finestra, del frame o della tabella. Questo ha favorito la
scelta di piccole texture in grado di dare la sensazione visiva
dell'uniformità. Grazie ai CSS questi limiti vengono spazzati via.
Ecco la lista delle proprietà per lo sfondo,
applicabili a tutti gli elementi:
·
background-color
·
background-image
·
background-repeat
·
background-attachment
·
background-position
Ciascuna di essa definisce un
solo, particolare aspetto relativo allo sfondo di un elemento.
background
Questa è la proprietà background. Con essa
possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere
valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte
le proprietà viste finora, ma deve contenere almeno la definizione del
colore di sfondo.
Sintassi
selettore { background: background-color
background-image
background-repeat
background-attachment
background-position;
}
I
valori non vanno separati da virgole. L'ordine non è importante, ma quello dato
è il più logico e andrebbe rispettato: si va in ordine di importanza.
background-color
Definisce
il colore di sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
selettore {background-color: valore;}
Valori
·
un qualunque colore
·
la parola chiave transparent
Usando transparent come
valore un elemento avrà come colore quello dell'elemento parente. Nell'esempio: il
colore di #div2 è impostato sutransparent, per cui esso sarà, per
l'appunto, trasparente, lasciando emergere il colore dell'elemento parente
(#div1).
Esempi
body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)
background-image
Definisce
l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non
è ereditata.
Sintassi
selettore { background-image: url(valore); }
Valori
·
un URL assoluto o relativo che punti ad un'immagine
·
la parola chiave none. Valore
di default.
Usare
none equivale a non impostare la proprietà:
nessuna immagine verrà applicata come sfondo.
Esempi
body {background-image: url(sfondo.gif); }
div body {background-image: url(http://www.server.it/images/sfondo.gif); }
Usando questa proprietà da
sola si ottiene lo stesso risultato che in HTML si aveva con l'attributo
background.background-repeat
Questa proprietà consente di definire la
direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata.
Sintassi
selettore {background-repeat: valore;}
Valori
·
repeat. L'immagine viene ripetuta in orizzontale e
verticale. È il comportamento standard.
·
repeat-x. L'immagine viene ripetuta solo in orizzontale.
·
repeat-y. L'immagine viene ripetuta solo in verticale.
·
no-repeat. L'immagine non viene ripetuta.
L'esempio riporta i quattro diversi
comportamenti con un'immagine di sfondo applicata ad una tabella.
Esempi
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }
Nessun commento:
Posta un commento