CSS/Proprietà di base/Sfondo

Copertina

Grazie ai CSS possiamo facilmente assegnare un colore o un'immagine di sfondo, ripetuta o meno, ad un elemento nel web: dal body al paragrafo, dalla tabella all'input form.

Colore

La proprietà background-color permette di definire il colore di sfondo di un elemento.

Sintassi:

 selettore { background-color: <valore>; }

Il valore deve essere un colore. Il colore verrà inoltre usato per riempire gli spazi non coperti da un'eventuale immagine di sfondo.

Esempio:

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

background-image

La proprietà background-image definisce un'eventuale immagine da usare per lo sfondo dell'elemento.

Sintassi:

 selettore { background-image: <valore> }

dove <valore> può essere:

un URL assoluto o relativo che punti ad un'immagine (in questo caso bisognerà usare la notazione url(percorso)
none (valore di default): non verrà applicata nessuna immagine allo sfondo

Esempio:

body { background-image: url(immaginesfondo.gif); }
.class2 { background-image: url(http://www.wikibooks.it/immagine.gif); }

background-repeat

Imposta il modo in cui l'immagine viene ripetuta sullo sfondo.

Sintassi:

selettore { background-repeat: <valore>; }

I valori possibili sono i seguenti:

repeat: l'immagine di sfondo viene ripetuta sia in senso orizzontale sia in senso verticale
repeat-x: l'immagine di sfondo viene ripetuta in senso orizzontale
repeat-y: l'immagine di sfondo viene ripetuta in senso verticale
no-repeat: l'immagine di sfondo viene visualizzata solo una volta, senza ripetizioni

background-attachment

Questa funzione consente di scegliere se l'immagine dovrà essere fissa sullo sfondo, o muoversi con la pagina.

Sintassi:

selettore { background-attachment: <valore>; }

dove <valore> può assumere i seguenti valori:

fixed: l'immagine è fissa sullo sfondo
scroll: l'immagine si muove con la pagina

Posizione

Questa funzione decide come deve essere posizionata l'immagine all'interno della pagina.

Sintassi:

selettore { background-position: <valore>; }

dove <valore> può assumere questi valori:

top left in alto a sinistra
top center in altro centrata
top right in alto a destra
center left al centro a sinistra
center center al centro centrata
center right al centro a destra
bottom left in basso a sinistra
bottom center in basso centrata
bottom right in basso a destra
<valori in percentuale>

Per quanto riguarda in valori in percentuale, essi decidono il valore x e y in percentuale rispetto alla pagina.

Esempio:

selettore { background-position: 50% 50% }

L'immagine è così mostrata al centro.

Riepilogo

Per una maggiore compattezza e semplificazione del codice, possiamo riassumere tutte le proprieta relative allo sfondo scrivendo semplicemente background e tutti i 5 valori possibili a seguire.

Esempio:

 selettore { 
      background: blue 
                  url(immaginedisfondo.gif) 
                  no-repeat 
                  scroll 
                  center center;
 }

Alcuni esempi

Per creare sfondi accattivanti e leggeri in modo semplice, è sufficiente usare con un po' di abilità programmi di grafica e la proprietà background. Ad esempio è molto facile creare uno sfondo sfumato che riempie l'intera pagina.

Vogliamo ottenere uno sfondo azzurro nella parte superiore della pagina e blu nella parte inferiore; per ridurre il peso della pagina finale, usiamo un'immagine stretta e alta che poi ripeteremo in orizzontale.
Per prima cosa, usando un programma di grafica come Gimp, creiamo un'immagine con altezza a piacere e larghezza 2px e la riempiamo in verticale con il riempimento sfumato che preferiamo.
Una volta salvata l'immagine nella cartella della pagine, ad esempio come "back.png", usiamo qualche proprietà CSS per applicare lo sfondo alla pagina:

selettore { 
 background-color: lightblue; /*riempie lo spazio non coperto dall'immagine*/
 background-image: url(back.png);
 background-repeat: repeat-x; /*ripete l'immagine in orizzontale*/
 background-position: bottom left; /*allinea l'immagine in basso*/
}