Con la scorsa lezione abbiamo esaurito la rassegna delle proprietà CSS tipiche del box-model. A partire da questa lezione passeremo in rassegna le altre proprietà dei fogli di stile partendo da quelle relative allo sfondo (o background), le quali possono essere applicate tanto alla pagina (tag <body>) quanto ad un suo elemento (ad esempio un box).
Attraverso tali proprietà possiamo applicare ad un elemento uno sfondo colorato oppure un’immagine da utilizzarsi singolarmente o ripetuta come se fosse una "piastrella" (cd. pattern). Ma andiamo per gradi e vediamo, prima di tutto, quali sono queste proprietà:
- background – consente di impostare tutte le caratteristiche dello sfondo con una notazione "compressa" (vedremo in seguito cosa vuol dire);
- background-color – imposta il colore sfondo;
- background-image – imposta un’immagine di sfondo;
- background-repeat – gestisce la ripetizione dell’immagine di sfondo sulla pagina;
- background-position – imposta la posizione dell’immagine di sfondo;
- background-attachment – serve per definire se l’immagine di sfondo deve restare fissa oppure "scrollare" col resto della pagina.
E’ bene precisare che, come le proprietà del box-model, anche le proprietà relative allo sfondo non vengono ereditate ma riguardano, quindi, solo l’elemento cui sono applicate.
Lasciamo per ultima background e soffermiamo inizialmente la nostra attenzione sulle proprietà specifiche, analizzandole una ad una.
background-color
Attraverso questa proprietà si assegna ad un dato elemento un colore di sfondo il quale può essere indicato attraverso la classica notazione esadecimale, come valore RGB o attraverso parole chiave come, ad esempio, red o black. Un altro valore che può essere assegnato a questa proprietà è transparent: così facendo il box sarà, appunto, trasparente e quindi, di fatto, lascerà vedere lo sfondo del suo elemento genitore.
Vediamo qualche esempio:
body
{
background-color: #000000;
}
h1 {
background-color: rgb(255,255,255);
}
p {
background-color: yellow;
}background-image
Questa proprietà è utilizzata per specificare la URL (relativa o assoluta) di un’immagine da utilizzare come sfondo. Il valore di default di questa proprietà è none (cioè "nessuna immagine di sfondo").
Vediamo qualche esempio:
body
{
background-image: url('immagini/fiore.jpg');
}
body
{
background-image: url('http://www.miosito.com/immagini/fiore.jpg');
}L’uso degli apici tra le parentesi tonde può essere omesso salvo che la nostra URL non contenga uno spazio, nel qual caso sono necessarie.
Questa proprietà "condiziona" tutte le altre proprietà specifiche che vedremo di seguito.
Normalmente è consigliabile prevedere anche un colore di sfondo insieme all’immagine in quanto il colore andrà a riempire gli spazi eventualmente non coperti dall’immagine:
body
{
background-color: #FFFF00;
background-image: url('immagini/fiore.jpg');
}background-repeat
Questa proprietà è strettamente connessa alla precedente in quanto serve per definire se ed in che modo l’immagine specificata in background-image debba essere ripetuta. I valori ammessi per questa proprietà sono:
- repeat – (valore di default) l’immagine dui sfondo viene ripetuta sia in orizzontale che verticale;
- repeat-x – l’immagine viene ripetuta solo in senso orizzontale;
- repeat-y – l’immagine viene ripetuta solo in senso verticale;
- no-repeat – l’immagine non viene ripetuta (è consigliabile utilizzare questa opzione insieme ad immagini grandi a sufficienza per coprire l’area stilizzata).
Vediamo un esempio:
body
{
background-color: #FFFF00;
background-image: url('immagini/fiore.jpg');
background-repeat: no-repeat;
}background-attachment
Attraverso questa proprietà viene definito il comportamento dell’immagine in relazione allo scrolling di pagina: più precisamente è possibile specificare se lo sfondo debba "scrollare" insieme ai contenuti o se debba restare fisso. I due valori possibili per questa proprietà, infatti, sono "scroll" e "fixed".
Vediamo un esempio di immagine non ripetuta che non segue lo scroll:
body
{
background-color: #FFFF00;
background-image: url('immagini/fiore.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}background-position
Attraverso questa proprietà è possibile definire la posizione della nostra immagine di background. Più precisamente:
- definisce la posizione esatta dell’immagine di sfondo non ripetuta;
- definisce la posizione di partenza di un’immagine che viene ripetuta.
Nella pratica questa proprietà viene utilizzata quasi esclusivamente nel caso di immagini non ripetute.
Il suo valore può essere: una percentuale, un numero accompagnato da una unita di misura oppure una stringa (in quest’ultimo caso, il più frequente, si utilizzano le parole chiave "top", "left", "bottom" e "right").
Vediamo un esempio di immagine non ripetuta, che non segue lo scroll ed è centrata nello schermo:
body
{
background-color: #FFFF00;
background-image: url('immagini/fiore.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}Come potete vedere abbiamo utilizzato due volte la parola "center" per la nostra proprietà background-position in quanto il primo valore riguarda l’asse verticale ed il secondo quello orizzontale. Qualora venisse specificato un solo valore questo verrebbe applicato sia verticalmente che orizzontalmente.
La proprietà background
Come abbiamo già visto per altre famiglie di proprietà CSS, anche quelle relative alla gestione dello sfondo possono essere sintetizzate all’interno di un unica proprietà: la proprietà background.
Questa proprietà può essere utilizzata per definire, in un colpo solo, tutte le caratteristiche del nostro sfondo. L’ultimo codice visto sopra, ad esempio, può essere convertito in:
body
{
background: #FFFF00 url('immagini/fiore.jpg') no-repeat fixed center center;
}Come potete vedere i valori delle varie proprietà viste sin’ora sono passati, separati da uno spazio, alla singola proprietà background. L’ordine dei valori non è viuncolante ma per una questione di pulizia è consigliabile rispettare questa gerarchia:
- color
- image
- repeat
- attachment
- position
Ovviamente non è obbligatorio prevedere tutti e quattro i valori in quanto sarebbe perfettamente valida e funzionante anche una regola del genere:
body
{
background: #FFFF00;
}o una del genere:
body
{
background: url('immagini/fiore.jpg');
}