CSS background - GB Factory

Contenuto

1 Sfondi Multipli
2 Esempi
3 Supporto dei Browser

La proprietà css background, ti consente di controllare lo sfondo di qualsiasi elemento e viene visualizzato sotto al contenuto di quell’elemento.

Questa è una proprietà shorthand, quindi permette di scrivere in una sola riga quelle che sarebbero più proprietà da scrivere in righe diverse. Ecco un esempio:

.elemento {
  background:
    url(sfondo.jpg)            /* immagine */
    top center / 300px 300px   /* posizione / dimensione */
    no-repeat                  /* ripetere */
    fixed                      /* attaccamento */
    padding-box                /* origine */
    content-box                /* ritaglio */
    yellow;                    /* colore */
}

Infatti la proprietà background è costruita da altre proprietà:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Puoi utilizzare una combinazione di queste proprietà a tuo piacimento, in qualsiasi ordine (anche se quello raccomandato è riportato sopra).

Ogni cosa che non è specificata nella proprietà background è automaticamente impostata al suo valore predefinito. Per esempio, in questo caso:

.elemento {
  background-color: yellow;
  background: url(sfondo.jpg);
}

Lo sfondo sarà impostato a trasparente e non giallo. La soluzione è molto semplice, basta definire background-color dopo background, oppure definire tutto direttamente nella proprietà background.

Sfondi Multipli

Con CSS3, è stato aggiunto il supporto per sfondi multipli, che si sovrapporranno uno sull’altro. Qualsiasi proprietà correlata agli sfondi dovrà essere separata da una virgola, in questo modo:

.elemento {
  background: url(texture.jpg), url(sfondo.jpg) yellow;
  background-repeat: repeat-x, no-repeat;
}

Ogni valore separato da una virgola corrisponde ad un livello: il primo valore corrisponde al primo livello, il secondo valore al secondo livello e l’ultimo sfondo sarà sempre l’ultimo livello.

Esempi

Colore fisso

Lo sfondo più semplice che si possa fare è quello con un colore fisso, indicabile sia con il suo codice esadecimale (HEX) o con il suo nome. Inoltre, è possibile specificare anche l’opacità del colore di sfondo. Ecco alcuni esempi del codice, seguiti da un esempio live che potete analizzare.

.sfondo {
  background: #FFAE03;                /* Codice HEX */
  background: gold;                   /* Nome Colore */
  background: rgb(255, 174, 3, 0.8);
  /* Opacità */
}

Sfumatura

Volendo combinare più colori insieme, è possibile creare delle sfumature e impostarle come sfondo, le due di base sono linear-gradient (sfumatura lineare) e radial-gradient (sfumatura radiale), ma con un po’ di inventiva e cambiando qualche parametro, si possono creare degli effetti interessanti, ecco alcuni esempi base:

Immagine

Oltre ai colori, è possibile impostare anche le immagini come background, ecco alcuni esempi:

Supporto dei Browser

La proprietà background con le sue funzioni di base è supportata in ogni browser.

[caniuse feature=”background-img-opts”]