sintassi: background-image: url(<file immagine>)
Permette di selezionare un'immagine di sfondo. Esempio:
ATTENZIONE: se l'immagine è stata caricata sul server che ospita il sito e si trova nella stessa cartella della pagina html, non è necessario indicare nessun percorso. Se l'immagine si trova su un diverso sito in rete, bisogna indicare l'url completa:
Bisogna usare con molta cautela le immagini di sfondo, perché spesso rischiano di essere una fonte di distrazione e di confusione. In genere è meglio usare un'immagine piccola e semplice (per esempio una texture) ripetuta (vedi qui sotto), piuttosto che un'unica grande immagine (che oltretutto non produrrebbe lo stesso effetto con schermi di dimensioni differenti).
sintassi: background-repeat: repeat | no-repeat | repeat-x | repeat-y
Siccome non è detto che l'immagine di sfondo sia abbastanza grande da coprire l'intero schermo, la proprietà background-repeat serve per specificare se l'immagine di sfondo dev'essere ripetuta e in che modo. Il valore repeat è quello di default (usato automaticamente in assenza di indicazioni): l'immagine viene ripetuta fino a coprire l'intero schermo:
Se viene specificato il valore no-repeat, l'immagine di sfondo viene visualizzata una sola volta nell'angolo superiore sinistro:
Con repeat-x l'immagine viene ripetuta lungo l'asse x (orizzontalmente):
Con repeat-y la ripetizione avviene in verticale:
E' anche possibile specificare esattamente a partire da quale punto deve essere visualizzata l'immagine di sfondo, usando background-position. Infine la proprietà background-attachment indica se l'immagine è fissa o deve scorrere (scrolling) con il resto della pagina. Un semplice esempio di queste proprietà è mostrato qui sotto:
E' possibile specificare diversi stili di tipo font con un'unica istruzione (si parla in questo caso di shorthand o abbreviazione). Per esempio:
background:#f00 url(background.gif) no-repeat fixed 0 0;
equivale a:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
Per quanto riguarda l'ordine con cui devono essere specificati i diversi stili, il W3C raccomanda di seguire l'ordine precedente. E' possibile omettere qualsiasi valore. Se un valore viene omesso, viene utilizzato il corrispondente valore di default.
Sito realizzato in base al template offerto da
http://www.graphixmania.it