Background

Si può combinare diverse immagini di sfondo in un medesimo box. La proprietà è:

background-image: url(img1), …, url(imgN);

La prima immagine sarà quella in superficie e le altre andranno via via a posizionarsi negli strati inferiori. Possiamo anche definire la posizione

background-position posit1, …, positN;

Altre proprietà utilizzabili sono:

• backgroud-repeat – indica se ripetere l’immagine di sfondo;
• backgroud-attachment – indica se bloccare l’immagine di sfondo se si scorre la pagina;
• backgroud-clip – definiamo l’area di estensione dello sfondo
  • border-box – lo sfondo si estende sull’intera superficie;
  • padding-box – lo sfondo si estende sull’intera superficie tranne il bordo;
  • content-box – lo sfondo si estende sull’intera superficie tranne padding e bordo;
• backgroud-origin – definiamo a quale area di un elemento posizioniamo lo sfondo
  • border-box – intera superficie compreso padding e bordo;
  • padding-box – intera superficie compreso padding ma non il bordo;
  • content-box – intera superficie escludendo padding e bordo;
• backgroud-size – modifica le dimensioni dell’immagine, se come valore passiamo cover  l’immagine viene adattata per coprire tutta la superficie ma può capitare che una parte viene tagliata per mantenere le proporzioni;

Possiamo applicare una sfumatura con i seguenti valori:

• linear-gradient – passaggio graduale tra due colori;
  • direzione: top, top left, top right, bottom, bottom left, bottom right, left, right;
  • colore e offset: l’offset viene espresso in percentuale o decimale (0.0 a 1.0) e determina il punto di parteza;
• radia-gradient – passaggio tra due colori irradiandosi;
  • punto di origine: top, bottom, left, right, center;
  • forma: circle, ellipse;
  • dimensione: farthest-corner, closest-side, closest-corner, farthest-side;
  • colore e offset: le stesse osservazioni come nei gradienti lineari;