logo

Come aggiungere un'immagine di sfondo nei CSS?

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.

mappa ad albero

Sintassi

 background-image: url(); 

Valori

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

tipi di dati di riferimento in Java

Esempio

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

Produzione

Come aggiungere un'immagine di sfondo nei CSS

Esempio

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

Produzione

Come aggiungere un'immagine di sfondo nei CSS

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'); } 
Provalo adesso

Produzione

Come aggiungere un'immagine di sfondo nei CSS