Proprietà background-image CSS

Definizione e uso

background-image L'attributo imposta un'immagine di sfondo per l'elemento.

Lo sfondo dell'elemento occupa tutte le dimensioni dell'elemento, inclusi i margini interni e i bordi, ma non i margini esterni.

Per impostazione predefinita, l'immagine di sfondo si trova nell'angolo in alto a sinistra dell'elemento e si ripete in direzione orizzontale e verticale.

Suggerimento:Imposta un colore di sfondo disponibile in modo che, se l'immagine di sfondo non è disponibile, la pagina mantenga una buona visualizzazione.

Spiegazione dettagliata

L'attributo background-image imposta un'immagine nello sfondo dell'elemento.

in base background-repeat ai valori dell'attributo, l'immagine può essere ripetuta infinitamente, ripetuta lungo un asse (asse x o asse y) o non ripetuta affatto.

Immagine di sfondo iniziale (immagine originale) in base background-position Posizione del valore dell'attributo.

Vedi anche:

Corso CSS:Sfondo CSS,Sfondo CSS (avanzato),Gradiente CSS

Manuale di riferimento HTML DOM:Attributo backgroundImage

Esempio

Imposta l'immagine come sfondo della pagina:

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

Prova da solo

Sintassi CSS

background-image: url|none|initial|inherit;

Valore dell'attributo

Valore dell'attributo

Valore Descrizione
url('URL) Percorso dell'immagine.
nessuna Valore predefinito. Non mostrare l'immagine di sfondo.
inherit Specifica che l'attributo background-image dovrebbe essere ereditato dal padre dell'elemento.

Dettagli tecnici

Valore predefinito: nessuna
Ereditarietà: no
Versione: CSS1
Sintassi JavaScript: oggetto.style.backgroundImage="url(stars.gif)"

Supporto del browser

Le numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5