Background-color

Utilizzando la proprietà background-color è possibile specificare il colore di sfondo di un elemento. Il colore di sfondo di una pagina, per esempio, può essere definito nel modo seguente:

body {
background-color: #a9a9a9;
}

Nei CSS, di solito, i colori vengono indicati attraverso un valore esadecimale (il valore indicato nell’esempio corrisponde al grigio scuro).

Background-image

La proprietà background-image specifica una immagine da utilizzare come sfondo di un elemento. Di default l’immagine viene ripetuta sia orizzontalmente che verticalmente in modo da ricoprire l’intera area disponibile. Esempio:

div {
background-image: url(‘sfondo.gif’);
}

Backgroud-reapet

La proprietà backgroud-repeat specifica se e come una immagine di sfondo deve essere ripetuta. Come detto di default l’immagine di sfondo viene ripetuta sia orizzontalmente che verticalmente.

La proprietà può assumere i seguenti valori:

reapet	L'immagine viene ripetuta orizzontalmente e verticalmente (default)
reapet-x	L'immagine viene ripetuta solo orizzontalmente
reapet-y	L'immagine viene ripetuta solo verticalmente
no-reapet	L'immagine non viene ripetuta
inherit	Specifica che il valore della proprietà deve essere ereditato dall'elemento parente

Esempio:

div {
background-image: url(‘sfondo.gif’);
background-reapet: no-reapet;
}

Background-attachment

La proprietà background-attachment specifica se l'immagine di sfondo deve essere fissa oppure se deve scorrere insieme al contenuto della pagina.

Può assumere i seguenti valori:

scroll	L'immagine di sfondo scorre insieme al resto della pagina (default)
fixed	L'immagine di sfondo è fissa
ineherit	Specifica che il valore della proprietà deve essere ereditato dall'elemento parente

Esempio:

div {
background-image: url(‘sfondo.gif’);
background-reapet: no-reapet;
background-attchment: fixed;
}

Background-position

La proprietà background-position definisce la posizione iniziale dell'immagine di sfondo.

Può assumere i seguenti valori:

left top left center left bottom right topo right center right bottom center topo center center center bottom	Se viene specificata una solo parola chiave, l'altra sarà automaticamente center
x% y%	La posizione orizzontale e verticale viene individuata in percentuale rispetto alle dimensioni dell'elemento parente
x    y	La posizione orizzontale e verticale dell'immagine viene specificando un valore numerico in pixel o in altra unità di misura valida per i CSS
ineherit	Specifica che il valore della proprietà deve essere ereditato dall'elemento parente

Esempio:

div {
background-image: url(‘sfondo.gif’);
background-reapet: no-reapet;
background-attachment: fixed;
background-position: center center;
}

Background - scorciatoia

Come si può vedere ci sono molto proprietà da considerare quando si ha a che fare con lo sfondo. Per rendere il codice più compatto è possibile specificare tutte le proprietà in un'unica riga utilizzando la scorciatoia background. Esempio:

div {
background-image: #a9a9a9 url(‘sfondo.gif’) no-reapet fixed center center;
}

L'ordine dei valori delle proprietà deve essere il seguente:

• background-color;
• background-image;
• background-repeat;
• background-attachment;
• background-position.

Non importa se manca il valore di una propietà ma è sufficiente che agli altri rispettino l'ordine suddetto.