CSS Background

Tramite la proprietà Background dei CSS, possiamo controllare lo sfondo degli elementi, sia per quanto riguarda i colori sia per quanto riguarda le immagini.

Proprietà:

Proprieta	Descrizione	Valori	Esempi
background	Per impostare tutte le proprietà dello sfondo	background-color background-image background-repeat background-attachment background-position	¤ background ¤
background-attachment	Dice se l’immagine di sfondo è fissa o scrolla con la pagina	scroll fixed	¤ background-attachment ¤
background-color	Colore di sfondo di un elemento	colore transparent	¤ background-color ¤
background-image	Imposta un’immagine come sfondo	url none	¤ background-image ¤
background-position	La posizione dell’immagine	top left top center top right center left center center center right bottom left bottom center bottom right x-perc y-perc x-pos y-pos	¤ background-position ¤
background-repeat	Se un’immagine deve essere ripetuta oppure no	repeat repeat-x repeat-y no-repeat	¤ background-repeat ¤

Vediamole una alla volta:

background

Permette impostare tutte le proprietà dello sfondo.

Valori possibili sono

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Esempio

.ConSfondo {
  width:300px;
  height:200px;
  background: #ffffff url(demo5.jpg) repeat-y
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

background-attachment

Permette di dire se lo sfondo scrolla con la pagina oppure no.

Valori possibili sono

• scroll (Lo sfondo si muove con il resto della pagina)
• fixed (Lo sfondo è fisso)

Esempio

.ConSfondoCheScrolla {
  width:300px;
  height:200px;
  overflow:auto;
  background-image: url(demo5.jpg);
  background-attachment: scroll;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

background-color

Permette di impostare il colore di sfondo di un elemento HTML.

Valori possibili sono

• un colore ( Può essere un nome (red), in valore rgb (rgb(255,0,0)), o un numero esadecimale (#ff0000) )
• transparent (Se lo sfondo è trasparente)

Esempio

.ConColoreDiSfondo {
  width:200px;
  height:200px;
  background-color: red;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

background-image

Serve ad impostare l’immagine di sfondo.

Valori possibili sono

• un url (Il percorso del’immagine)
• none (Se non si vuole un’immagine di sfondo)

Esempio

.ConImmagineDiSfondo {
  width:300px;
  height:200px;
  background-image: url(demo5.jpg);
  background-color: #ffffff
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

background-position

Imposta la posizione dell’immagine di sfondo.

Valori possibili sono

• top left
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-percentuale y-percentuale (Il primo valore è la posizione orizzzontale, il secondo quello verticale.)
• x-posizione y-posizione (Il primo valore è la posizione orizzzontale, il secondo quello verticale. L’angolo in alto a sinistra è: 0 0)

Esempio

.ConSfondoInAlto {
  width:300px;
  height:600px;
  background-image: url(demo5.jpg);
  background-position: top left;
  background-repeat: no-repeat;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

background-repeat

Dice se e come un’immagine di sfondo sarà ripetuta.

Valori possibili sono

• repeat (Immagine ripetuta orizzontalmente e verticalmente )
• repeat-x (Immagine ripetuta orizzontalmente)
• repeat-y (Immagine ripetuta verticalmente)
• no-repeat (L’immagine di sfondo viene visualizzata una volta soltanto)

Esempio

.ConSfondoRipetuto {
  width:300px;
  height:600px;
  background-image: url(demo5.jpg);
  background-repeat: repeat-y;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---