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

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

cssselettore {
  background-image: none;
}

Valori

Valore predefinito: none.

Esempio

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

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

css#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:

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

css#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:

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

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

Результат:

Vedi anche