Durante la creazione di un sito Web o la scrittura di un post sul blog, le immagini svolgono un ruolo vitale nel rendere le cose più attraenti e comprensibili. Senza immagini, che si tratti di un blog o di un sito Web, diventa noioso e i lettori iniziano a perdere interesse. Le immagini di sfondo hanno anche un impatto pragmatico sull'interattività della pagina web.

Questo articolo fornisce una guida dettagliata per aggiungere un'immagine di sfondo in HTML. Inoltre, questo articolo serve i seguenti risultati relativi a:

• Come aggiungere un'immagine di sfondo in HTML
• Come aggiungere un'immagine di sfondo a un tag in HTML
• Come aggiungere un'immagine di sfondo della pagina web in HTML
• Come evitare la ripetizione dell'immagine di sfondo
• Come coprire l'intero sfondo senza ripetizione
• Come allungare l'immagine di sfondo in HTML

Come aggiungere un'immagine di sfondo in HTML

In HTML, possiamo aggiungere un'immagine di sfondo utilizzando l'immagine di sfondo della proprietà CSS. Un'immagine di sfondo viene utilizzata come sfondo su un sito Web o come immagine di copertura per un cursore. La sintassi della proprietà "Immagina di background" è scritta di seguito:

Imaga di sfondo: URL ('Nome immagine');

La sintassi sopra è una proprietà CSS e può essere utilizzata in un foglio di stile esterno, CSS interno o CSS in linea.

Esempio

Per una migliore comprensione, viene praticato il seguente codice HTML per aggiungere un'immagine di sfondo in HTML.

Questa è un'immagine

In questo esempio, utilizziamo la proprietà dell'immagine di background in

Tag per aggiungere un'immagine di sfondo.

Produzione

L'output mostra che in HTML è possibile aggiungere un'immagine di sfondo utilizzando la proprietà CSS.

Come aggiungere un'immagine di sfondo a un tag in HTML

Possiamo anche aggiungere l'immagine di sfondo in un paragrafo utilizzando CSS interno, in linea o esterno. Possiamo usare l'immagine di sfondo per un paragrafo per creare design diversi.

Esempio

Sfondo di paragrafo

Questo paragrafo è scritto per dimostrare l'uso dell'immagine di sfondo con il paragrafo.
Questo paragrafo è scritto per dimostrare l'uso dell'immagine di sfondo con il paragrafo. Questo paragrafo è scritto per dimostrare l'uso dell'immagine di sfondo con il paragrafo.
Questo paragrafo è scritto per dimostrare l'uso dell'immagine di sfondo con il paragrafo. Questo paragrafo è scritto per dimostrare l'uso dell'immagine di sfondo con il paragrafo.

In questo esempio utilizziamo un'immagine di sfondo per modificare lo sfondo del paragrafo.

Produzione

L'output mostra che aggiungiamo un'immagine di sfondo a un paragrafo utilizzando la proprietà dell'immagine di fondo.

Come aggiungere un'immagine di sfondo della pagina web in HTML

Di solito lo sfondo di una pagina Web è bianco ma possiamo anche cambiare lo sfondo di una pagina Web utilizzando la proprietà dell'immagine di background nel tag di HTML. immagine di sfondo.

Esempio

Sfondo del corpo

Durante la creazione di un sito Web o la scrittura di un post sul blog, le immagini svolgono un ruolo vitale nel rendere le cose più attraenti e comprensibili. Senza immagini, che si tratti di un blog o di un sito Web, diventa noioso e i lettori iniziano a perdere interesse.

In questo esempio cambiamo lo sfondo di una pagina Web aggiungendo un'immagine di sfondo a htmlbody.

Produzione

Questo output mostra che la proprietà dell'immagine di sfondo ha impostato l'immagine su tutta la pagina.

Come evitare la ripetizione dell'immagine di sfondo

Quando aggiungiamo sfondo su una pagina Web, l'immagine si ripete per coprire l'intera pagina come mostrare di seguito:

Quindi per evitare la ripetizione dell'immagine utilizziamo la proprietà CSS Ripeat di sfondo e impostare il suo valore su no-ripeat Come mostrato nella seguente uscita:

Esempio

In questo esempio rimuoviamo la ripetizione dell'immagine con l'aiuto della proprietà CSS di ripetizione in background.

Produzione

L'output lo mostra dopo aver usato Ripeat background: no-ripetizione; Le immagini di proprietà arrivano alle loro dimensioni originali e lasciano vuoto il resto della pagina.

Come coprire l'intero sfondo senza ripetizione

IL Size di sfondo E attacco di background Le proprietà possono essere utilizzate per impostare un'immagine su tutto lo sfondo. Per fare ciò, devi usare il copertina E fisso valori di Size di sfondo E attacco di background proprietà.

Esempio

In questo esempio abbiamo usato il Size di sfondo: copertina Per aggiungere un'immagine di sfondo all'intera pagina Web senza ripetizione. E il Attacco di background: fisso La proprietà rimuove l'effetto di scorrimento.

Produzione

L'output sopra mostra che la proprietà di dimensioni di sfondo copre l'intera pagina Web ma rimane scorrevole in modo da rimuovere l'effetto di scorrimento abbiamo usato la proprietà di attacco in background.

Come allungare l'immagine di sfondo in HTML

Puoi allungare l'immagine di sfondo per evitare la ripetizione di un'immagine. Per farlo, il Size di sfondo E attacco di background Proprietà CSS.

Esempio

In questo esempio abbiamo usato il Size di sfondo: 100% 100%. I primi 100 si riferiscono alla larghezza e alla seconda 100 identifica l'altezza che alla fine allunga l'immagine. Mentre Attacco di background: fisso

Produzione

L'output sopra mostra la proprietà di dimensioni di sfondo per allungare l'immagine ma rimane scorrevole in modo da rimuovere l'effetto di scorrimento abbiamo usato la proprietà di attacco di fondo.

Conclusione

In html, immagine di sfondo La proprietà viene utilizzata per aggiungere un'immagine di sfondo . Questo articolo mira ad aggiungere un'immagine di sfondo in HTML. L'immagine di sfondo può essere aggiunta a un singolo elemento HTML o all'intera pagina web. Inoltre, l'immagine di sfondo può essere personalizzata utilizzando varie proprietà CSS come proprietà di background, attacco di sfondo o ripetizioni di sfondo. Abbiamo anche fornito una visione dell'utilizzo di queste proprietà per manipolare l'immagine di fondo. immagine di sfondo.