background

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.

Il numero indica la versione minima del browser in cui la feature sia supportata. Per ottenere maggiori informazioni, passare con il mouse sopra la versione.

Desktop

chrome
Google Chrome
15
firefox
Mozilla Firefox
4
ie
Internet Explorer
9
edge
Microsoft Edge
12
opera
Opera
10
safari
Apple Safari
7

Mobile / Tablet

and_chr
Android Chrome
85
and_ff
Android Firefox
79
android
Android
4.4
samsung
Samsung Internet
4
op_mob
Opera Mobile
10
ios_saf
iOS Safari
7.0

Queste statistiche sul supporto da parte dei browser provengono da Caniuse, che potete visitare per informazioni più dettagliate.