Background-image - Immagine di sfondo
La proprietà background-image imposta un immagine come sfondo. Accetta due valori:
- none non sarà visualizzata nessuna immagine
- indirizzo dell'immagine scritto nel formato: url(percorse_dell_immagine.gif)
Background-image viene usato insieme alle proprietà:
background-image
body { background-image: url(sfondo.gif); }
|
Imposta l'immagine sfondo.gif come sfondo della pagina.
|

background-repeat
background-repeat gestisce la ripetizione dell'immagine di sfondo. Accetta i valori:
- repeat - immagine ripetuta verticalmente ed orizzantmente
- repeat-x - immagine ripetuta solo orizzontalmente
- repeat-y - immagine ripetuta solo verticalmente
- no-repeat - immagine ripetuta una volta sola
body { background-image: url(sfondo.gif);
background-image: repeat-x
}
|
L'immagine sfondo.gif viene ripetuta solo orizzontalmente
|

background-position
La proprietà background-position imposta la posizione dell'immagine di sfondo. I valori accettati sono:
- Lunghezze o percentuali
- Left, right, center
- Top, bottom, center
body { background-image: url(sfondo.gif);
background-position: left top
}
|
L'immagine sfondo.gif viene posizionata in alto a sinistra
|

background-attachment
background-attachment permette di mantenere fissa far scorrere l'immagine rispetto ai contenuti della pagina.
Accetta i valori:
- fixed - immagine di fondo fissa, anche allo scorrere dei contenuti
- scroll - l'immagine scorre insieme ai contenuti
body { background-image: url(sfondo.gif);
background-position: left top;
background-attachment: fixed
}
|
L'immagine sfondo.gif viene posizionata in alto a sinistra. Rimane fissa in quella posizione anche durante lo scrolling della pagina.
|
