Background-image - Immagine di sfondo

La proprietà background-image imposta un'immagine come sfondo. Accetta due valori: 

1. none non sarà visualizzata nessuna immagine
2. indirizzo dell'immagine scritto nel formato: url(percorse_dell_immagine.gif)

Background-image viene usato insieme alle proprietà:

• background-repeat
• background-position
• background-attachment

---

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 orizzantamente
• 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 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.

 

 

(Annunci Google)