CSS background
La proprietà CSS background imposta lo sfondo di un elemento
La proprietà background è una delle proprietà shorthand che consente di definire vari aspetti dello sfondo di un elemento in un'unica dichiarazione. Può essere usata per impostare il colore di sfondo, l'immagine, la posizione, la ripetizione, la dimensione e l'origine. Questa proprietà semplifica la gestione dello stile di sfondo e consente di combinare più dichiarazioni in un'unica riga di codice.
Sintassi
Significato dei valori principali:
-
color: imposta il colore di sfondo dell'elemento. Può essere un colore predefinito (come
red), un valore esadecimale (#ff0000) o un valore RGB (rgb(255, 0, 0)). -
image: imposta un'immagine come sfondo. Può essere un URL che punta all'immagine desiderata.
-
position: determina la posizione dell'immagine di sfondo all'interno dell'elemento. Può essere un valore in percentuale (
50% 50%) o parole chiave cometop,center,bottom,left,right. -
size: definisce la dimensione dell'immagine di sfondo. I valori possono essere
auto,cover(per riempire l'elemento) ocontain(per mantenere le proporzioni dell'immagine). -
repeat: specifica come l'immagine di sfondo deve essere ripetuta. Può essere
repeat,no-repeat,repeat-xorepeat-y.
Esempio proprietà: background
Codice Esempio: background
.background-example {
background: #3498db url('https://example.com/image.jpg') no-repeat center center / cover;
padding: 50px;
color: white;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
Contenuto Esempio: background
Esempio di utilizzo di background
In questo esempio, lo sfondo dell'elemento viene impostato con un colore di base, un'immagine di sfondo e alcune altre proprietà di personalizzazione:
CSS e HTML per l'elemento con sfondo:
<style>
.background-example {
background: #3498db url('https://example.com/image800x200.jpg') no-repeat center center / cover;
padding: 50px;
color: white;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
</style>
<div class="background-example">
Esempio di un elemento con sfondo personalizzato
</div>
Esempio background doppia immagine
In questo esempio, lo sfondo dell'elemento viene impostato con un'immagine di sfondo primaria ed una seconda immagine sovrapposta secondaria:
CSS e HTML per l'elemento con doppia sfondo:
<style>
.background-example2 {
background:
/* Immagine in primo piano (logo) */
url('https://example.com/logo.png') no-repeat center center,
/* Immagine di sfondo */
url('https://example.com/image800x200.jpg') no-repeat center center / cover;
height:190px;
padding: 10px 10px 0px 10px;
color: white;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
</style>
<div class="background-example">
Esempio di un elemento con doppio sfondo
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.221
