SINTESI
Passiamo 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, vediamo quali sono queste proprietà:
- Background: consente di impostare tutte le caratteristiche dello sfondo con una notazione "compressa"
- Background-color: 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.
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").
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:
Esempio: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): immagine dello sfondo viene ripetuta sia in verticale che in orizzontale
- Repeat-x: l'immagine viene ripetuta solo in senso orizzontale
- Repeat-y: in senso verticale
- No-repeat: L'immagine non viene ripetuta (è consigliabile utilizzare questa opzione insieme a immagini grandi a sufficenza per coprire l'area stilizzata)
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".
Esempio:
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").
Esempio:body { background-color: #FFFF00; background-image: url('immagini/fiore.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; }
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:
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; }
Nessun commento:
Posta un commento