Proprietà background-image

La proprietà background-image imposta un'immagine di sfondo per un elemento. Per impostazione predefinita l'immagine ricoprirà l'intero blocco con le sue copie, tuttavia, questo comportamento può essere annullato con la proprietà background-repeat.

Sintassi

selettore {
	background-image: url(percorso dell'immagine);
}

selettore {
	background-image: none;
}

Valori

Valore	Descrizione
`url`	Percorso del file immagine. Il nome dell'immagine può essere tra virgolette doppie, virgolette singole o senza virgolette.
`none`	Annulla l'immagine di sfondo per l'elemento.

Valore predefinito: none.

Esempio

Impostiamo un'immagine di sfondo con background-image, impedendone la ripetizione con la proprietà background-repeat:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Esempio

Senza background-repeat l'immagine di sfondo ricoprirà l'intero blocco:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Esempio

È possibile impostare contemporaneamente un'immagine di sfondo e un colore di sfondo con background-color. In questo caso, dove non c'è l'immagine di sfondo - ci sarà il colore di sfondo:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Vedi anche

la proprietà background,
che è una proprietà abbreviata per lo sfondo