Le proprietà Background

Le proprietà background in CSS permettono di definire lo sfondo di un elemento. Queste proprietà includono:

background-color: imposta il colore di sfondo.
background-image: imposta un'immagine come sfondo.
background-repeat: controlla come l'immagine di sfondo si ripete.
background-position: imposta la posizione dell'immagine di sfondo.
background-attachment: determina se lo sfondo si muove con il contenuto o rimane fermo.
background: proprietà abbreviata che permette di specificare tutti i valori di background in una sola dichiarazione.

Le proprietà background sono molto utili per creare effetti visivi complessi e personalizzati per gli elementi HTML. Possono essere utilizzate per aggiungere texture, immagini o colori specifici a un qualsiasi elemento. Ad esempio, al corpo di questa pagina è stato applicato uno sfondo con un'immagine di texture tramite la proprietà background-image. A questo paragrafo di testo è stato applicato uno sfondo colorato tramite la proprietà background-color.

Background Color

La proprietà background-color viene utilizzata per impostare il colore di sfondo di un elemento HTML. Può essere definita utilizzando vari formati di colore, come nomi di colori, valori esadecimali, RGB, RGBA, HSL e HSLA. Se viene impostato anche un valore del canale Alpha, il colore di sfondo può essere reso trasparente o semi-trasparente, come mostrato nell'esempio seguente:

Alpha = 1.0 Alpha = 0.5 Alpha = 0.2 Alpha = 0.1 Alpha = 0.0

Background Image

La proprietà background-image viene utilizzata per impostare un'immagine di sfondo per un elemento HTML. L'immagine può essere specificata utilizzando l'URL di un file all'interno della funzione url() come in questo esempio:

background-image: url('../images/worldwideweb.png')

Si possono specificare più immagini di sfondo separandole con virgole. In questo caso le immagini verranno visualizzate in ordine, con la prima immagine sopra e le altre a seguire:

background-image: url('../_icons/html5.png'), url('../images/worldwideweb.png')

Ogni livello può avere le proprie proprietà dedicate:


        div {
  background-image:
    url(stars.png),
    url(noise.png),
    url(gradient.png);

  background-position:
    center,
    center,
    top;

  background-size:
    cover,
    auto,
    cover;

  background-repeat:
    no-repeat,
    repeat,
    no-repeat;
}

Oltre alla funzione url(), è possibile utilizzare altre funzioni per specificare immagini di sfondo:

background-image: conic-gradient(red, yellow, green, cyan, blue, magenta, red)

background-image: linear-gradient(30deg, red, yellow, green, cyan, blue, magenta, red)

background-image: radial-gradient(circle, red, yellow, green, cyan, blue, magenta, red)

background-image: repeating-conic-gradient(red 5%, yellow 30%)

background-image: repeating-linear-gradient(red 5%, yellow 30%)

background-image: repeating-radial-gradient(red 5%, yellow 30%)

Infine la modalità none, che è quella di default, non inserisce alcuna immagine di sfondo:

background-image: none