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;
Please follow and like us:

Lascia un commento