PROGRAMMIAMO
HTML - Stili per le immagini di sfondo
Background-image

sintassi: background-image: url(<file immagine>)

Permette di selezionare un'immagine di sfondo. Esempio:

<body style="background-image: url(immagine.gif)">

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:

<body style="background-image: url(www.programmiamo.altervista.org/immagini/foto.jpg)">

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

Background-repeat

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:

la propriété CSS background-image avec la constante repeat

Se viene specificato il valore no-repeat, l'immagine di sfondo viene visualizzata una sola volta nell'angolo superiore sinistro:

la propriété CSS background-image avec la constante no-repeat

Con repeat-x l'immagine viene ripetuta lungo l'asse x (orizzontalmente):

la propriété CSS background-image avec la constante x-repeat

Con repeat-y la ripetizione avviene in verticale:

la propriété CSS  background-image avec la constante y-repeat

→Per approfondire: W3 School

Altre proprietà per lo sfondo

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:

<body style="background-image: url(immagine.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 30% 20%;">

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:

<body style="background-image: url(foto.jpg); background-size: cover">

→Per approfondire: background-position e background-attachment

Shorthand (abbreviazioni)

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

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it