CSS



Impostare e posizionare l'immagine di sfondo ad un elemento HTML

Abbiamo già affrontato un tema simile nell'articolo Mettere lo sfondo ad un elemento. Questa volta invece impareremo a maneggiare lo sfondo per far si che questo, ad esempio, non sia ripetuto lungo tutto l'elemento. Capiremo anche come spostarlo, centrarlo e renderlo fisso anche scorrendo la pagina.


Sappiamo già che per far si che un elemento html abbia un'immagine come sfondo, dobbiamo impostare un valore all'attributo CSS background-image:


Sostituiamo a INDIRIZZO_IMMAGINE il link diretto all'immagine:


Ricordiamoci che elemento nell'esempio è un qualsiasi elemento visualizzabile sullo schermo come textarea, button, table, body, b, span...

Ora sapendo come si inserisce un immagine di sfondo, vediamo come allinearla.

Utilizzeremo come esempio la seguente immagine e la assegneremo al tag div di dimensioni 120x120 (vi ricordo che il tag div, se non specificate le dimensioni, tende ad occupare tutta la riga in cui è contenuto il testo, come spiegato nell'articolo Tags div e span: le principali differenze).

Collegamento all'immagine:

Normalmente assegnando uno sfondo piccolo ad un elemento avente le dimensioni più grandi, lo sfondo tende a ripetersi:

Testo all'interno

HTML <div style="width: 120px; height:120px; background-image: url(http://image.blogfree.net/3/7/1/5/9/1232290755.gif);"> Testo all'interno</div> (gli attributi height e width servono a stabilire le dimensioni del div)

Per far si che lo sfondo si ripeta solo orizzontalmente, verticalmente o che non si ripeta affatto, si utilizza la proprietà background-repeat che accetta come valore:

Testo all'interno repeat: Per far si che lo sfondo si ripeta sia orizzontalmente che verticalmente. Questo è il valore predefinito (se non impostiamo l'attributo background-repeat, l'immagine si ripeterà comunque)	HTML <div style="width: 120px; height:120px; background-image: url(http://image.blogfree.net/3/7/1/5/9/1232290755.gif);background-repeat: repeat;"> Testo all'interno</div> oppure come nell'esempio, se omesso HTML <div style="width: 120px; height:120px; background-image: url(http://image.blogfree.net/3/7/1/5/9/1232290755.gif);"> Testo all'interno</div>
Testo all'interno repeat-x: Lo sfondo verrà affiancato solo orizzontalmente. (il colore rosa indica la parte non occupata dallo sfondo)	HTML <div style="width: 120px; height:120px; background-image: url(http://image.blogfree.net/3/7/1/5/9/1232290755.gif);background-repeat: repeat-x;"> Testo all'interno</div>
Testo all'interno repeat-y: Lo sfondo verrà affiancato solo verticalmente. (il colore rosa indica la parte non occupata dallo sfondo)	HTML <div style="width: 120px; height:120px; background-image: url(http://image.blogfree.net/3/7/1/5/9/1232290755.gif);background-repeat: repeat-y;"> Testo all'interno</div>
Testo all'interno no-repeat: Lo sfondo non verrà affiancato in alcun modo, verrà presentata l'immagine così com'è. (il colore rosa indica la parte non occupata dallo sfondo)	HTML <div style="width: 120px; height:120px; background-image: url(http://image.blogfree.net/3/7/1/5/9/1232290755.gif);background-repeat: no-repeat;"> Testo all'interno</div>

Testo all'interno (anche il questo caso, il colore rosa indica la zona non coperta dallo sfondo che dovrebbe essere bianco)

Ora che sappiamo come affiancare lo sfondo, vediamo come spostarlo per raggiungere un effetto come qui a fianco. L'immagine di sfondo si trova perfettamente centrata rispetto all'elemento contenitore.

Per centrare l'immagine si utilizza la proprietà background-position. Questo accetta come valore:
left center o right o un qualsiasi numero come primo parametro (indicante lo spostamento sulla coordinata x, oppure left per allineare a sinistra, center al centro o right a destra) e
top center o bottom o un qualsiasi numero come secondo ( dove il numero indica lo spostamento sull'asse y, top l'allineamento in alto, center quello centrale e bottom che posiziona l'immagine in basso).

Ricordati che inserendo come parametro un numero, devi specificare anche la sua unità di misura (per approfondire vedi CSS Le unità di misura)

Il codice del risultato di sopra è


Da notare la scritta background-position: center center;. Invece di center center avremmo potuto inserire left e un numero indicante lo spostamento dello sfondo sulla coordinata y in pixel oppure due numeri indicanti lo spostamento. Eccovi qualche esempio:

Testo all'interno	background-position: left 20px;
Testo all'interno	background-position: 40px 70px;
Testo all'interno	background-position: right bottom;

Ovviamente è possibile utilizzare la proprietà background-position anche con gli sfondi affiancati

Testo all'interno

HTML <div style="background-image: url(http://image.blogfree.net/3/7/1/5/9/1232290755.gif); background-repeat: repeat-x; Background-position: center left; width: 120px; height: 120px;">Testo all'interno</div>