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).
→Per approfondire: W3 School
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:
→Per approfondire: W3 School
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:
Spesso è utile avere un'immagine di sfondo che si adatti esattamente alle dimensioni del contenitore, in modo da coprirlo completamente. Per ottenere questo bisogna usare la proprietà background-size col valore cover come in questo esempio:
→Per approfondire: background-position e background-attachment
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.
→Per approfondire: W3 School
Sito realizzato in base al template offerto da
http://www.graphixmania.it