Per impostare un'immagine dietro l'elemento, il "immagine di sfondo"La proprietà di CSS entra in gioco. Per impostazione predefinita, appare nell'angolo in alto a sinistra dello schermo e viene ripetuto in orizzontale e verticalmente. Puoi anche aggiungere più di un'immagine sullo sfondo dell'elemento HTML; Inoltre, imposta la larghezza e l'altezza dell'immagine secondo le tue preferenze. Tuttavia, puoi anche fermare la ripetizione dell'immagine.

Questo articolo fornirà i seguenti risultati di apprendimento:

• • Proprietà dell'immagine di background
  • Come impostare un'immagine di sfondo

Proprietà CSS "Immagina di fondo"

IL "immagine di sfondo"La proprietà viene utilizzata per applicare un'immagine sullo sfondo di un tag specificato.

Sintassi

Ecco la sintassi per impostare un'immagine di sfondo su un elemento HTML:

Imaga di sfondo: immagine url ();

Qui, l'immagine URL () ha il nome dell'immagine o il percorso della cartella dell'immagine in cui esiste.

Proviamo un esempio per avere una migliore comprensione.

Esempio: come impostare un'immagine di sfondo usando CSS?

In questo esempio, in primo luogo, creeremo altri due elementi (

E

tag), dietro i quali verrà aggiunta l'immagine di sfondo. Puoi aggiungere elementi in base alla tua scelta e applicare proprietà di immagini di fondo:

Imposta l'immagine di sfondo

Per impostare l'immagine di sfondo utilizzare la proprietà dell'immagine di sfondo CSS

Puoi aggiungere elementi in base alla tua scelta e applicare la proprietà dell'immagine di background.

Passa al CSS e assegna il nome dell'immagine in "immagine di sfondo"URL:

corpo
Immagina di background: URL ("IMG.jpg ");

Dopo aver completato tutti i passaggi, eseguire il file HTML, otterrai il seguente risultato:

Qui puoi vedere che l'immagine di sfondo viene ripetuta. Per evitare questo, usa il "Ripeat di sfondo"Proprietà e impostare il suo valore su"no-ripeat":

corpo
Immagina di background: URL ("IMG.jpg ");
Ripeat background: no-ripetizione;

Una volta fatto tutto, esegui il codice e controlla la tua pagina Web:

Ora hai un aspetto pulito ed elegante dell'immagine di sfondo impostata sul tag.

Buone pratiche per l'impostazione di immagini di sfondo

• • Seleziona un'immagine per abbinare il colore del testo.
  • Usa combinazioni di colori attraenti.
  • Se l'immagine di sfondo e il colore del testo non si abbinano, la tua pagina web è progettata male.

Conclusione

Per aggiungere un'immagine di sfondo in CSS, usa il “immagine di sfondo"Proprietà e dare l'URL dell'immagine nella funzione URL () di CSS. Puoi anche evitare che la tua immagine si ripeta usando il "Ripeat di sfondo"Proprietà e imposta il suo valore su"nessuno". Questo articolo ha spiegato la procedura per aggiungere un'immagine allo sfondo usando "immagine di sfondo" E "Ripeat di sfondo" proprietà.