Abbiamo recentemente visto come nei fogli di stile CSS la proprietà background-color posa essere utilizzata per definire il colore di sfondo di un elemento di HTML. background-image è una proprietà per molti versi simile che consente di utilizzare una immagine come sfondo di un elemento di una pagina web.
La proprietà background-image nei CSS
Supponiamo di voler aggiungere una immagine di sfondo ad una pagina HTML. In questo caso andremo quindi ad applicare la proprietà background-image dei CSS all’elemento <body> di HTML utilizzando un codice di questo tipo:
body {background-image: url(sfondo.gif);}
background-image accetta quindi come valore l’indirizzo del file grafico da utilizzare come sfondo. Nell’esempio il file sfondo.gif si trova nella stessa directory del foglio di stile ma più in generale si potrà indicare un qualsiasi percorso relativo o assoluto.
Osserviamo inoltre che la proprietà background-image indichi solo quale immagine utilizzare come sfondo ma non il modo in cui questa dovrà essere disposta. Questo aspetto è infatti gestito da altre due proprietà dei CSS.
background-position e background-repeat
La proprietà background-position definisce la posizione dell’immagine di sfondo. Assume una coppia di valori rappresentativi nell’ordine la posizione orizzontale e quella verticale
- left, center o right (sinistra, centro o destra) per il posizionamento orizzontale e top, center o bottom (alto centro o basso) per il posizionamento verticale.
- Una coppia di valori per il posizionamento cartesiano espressi ad esempio di pixel o mm.
- Una coppia di valori cartesiani percentuali.
La proprietà background-repeat invece stabilisce se l’immagine di sfondo debba essere ripetuta in verticale ed orizzontale fino a coprire l’intero spazio della pagina. background-repeat accetta i valori: repeat (ripete nelle due direzioni), repeat-x (ripete in orizzontale), repeat-y (ripete in verticale); no-repeat (nessuna ripetizione).
Combinando le tre proprietà avremo quindi un codice CSS di questo tipo:
body {
background-image: url(sfondo.gif);
background-position: center top;
background-repeat: repeat
}