IL immagine di sfondo La proprietà nei CSS viene utilizzata per impostare un'immagine come sfondo di un elemento. Utilizzando questa proprietà CSS, possiamo impostare una o più immagini di sfondo per un elemento.

Per impostazione predefinita, l'immagine è posizionata nell'angolo in alto a sinistra di un elemento e ripetuta sia in orizzontale che in verticale. L'immagine di sfondo deve essere scelta in base al colore del testo. La cattiva combinazione di testo e immagine di sfondo può essere la causa di una pagina web mal progettata e non leggibile.

IL URL() il valore di questa proprietà ci consente di includere un percorso file per qualsiasi immagine. Mostrerà lo sfondo dell'elemento. Possiamo utilizzare più immagini o una combinazione di gradienti e immagini per lo sfondo. Se non è possibile caricare l'immagine di sfondo o se stiamo utilizzando i gradienti, ma non sono supportati dal browser corrispondente, possiamo utilizzare il valore fallback (il valore utilizzato come sostituzione) come colore di sfondo dell'elemento.

Sintassi

 background-image: url();  

Valori

URL(): È l'URL dell'immagine. Possiamo separare gli URL con una virgola se vogliamo specificare più di un'immagine.

Esempio

 body { background-image: url('cat.webp'); background-color: lightgray; }  

Produzione

Esempio

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); }  

Produzione

Esempio

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); }  

Produzione