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;