CSS background-image
La proprietà CSS background-image consente di aggiungere un'immagine di sfondo
La proprietà background-image permette di impostare un'immagine come sfondo di un elemento. È possibile caricare un'immagine esterna tramite un URL utilizzando la funzione url(), oppure è possibile creare sfondi dinamici utilizzando i gradienti con le funzioni linear-gradient() o radial-gradient(). L'immagine può essere ridimensionata, posizionata e ripetuta a piacere con altre proprietà CSS.
Sintassi
Significato dei valori principali:
-
url(): specifica l'URL dell'immagine da utilizzare come sfondo. Esempio:
url('image.jpg'). -
linear-gradient(): crea un gradiente lineare come sfondo. Può essere utilizzato per passare da un colore all'altro in modo lineare.
-
radial-gradient(): crea un gradiente radiale, che parte da un punto centrale e si espande verso l'esterno, con una variazione di colori.
Esempio proprietà: background-image
Codice Esempio: background-image
.background-image-example {
background-image: url('https://example.com/image.jpg');
background-size: cover;
background-position: center;
padding: 100px;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: background-image
Esempio di utilizzo di background-image
In questo esempio, viene utilizzata un'immagine come sfondo per l'elemento:
CSS e HTML per l'elemento con immagine di sfondo:
<style>
.background-image-example {
background-image: url('https://example.com/1200x600');
background-size: cover;
background-position: center;
padding: 100px;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="background-image-example">
Sfondo con immagine
</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.118
