Utilizzando HTML e CSS, gli sviluppatori Web possono fare molte cose per rendere l'applicazione o le pagine Web più affidabili ed efficaci. Incorporare elementi reattivi è uno di questi. Più specificamente, l'elemento reattivo significa che quando gli utenti aprono una pagina Web su qualsiasi dispositivo, non influirà sulla sua visibilità. L'aggiunta di immagini reattive in CSS modificherà automaticamente la dimensione dello schermo.

Questo post ha spiegato le immagini di sfondo CSS reattive.

Come aggiungere immagini di sfondo CSS reattive?

Per aggiungere l'immagine reattiva come sfondo, seguire le istruzioni seguenti.

Passaggio 1: creare contenitore div

Inizialmente, crea un contenitore div con l'aiuto di ""Tag e assegnarlo un"id"Attributo con un valore di tua scelta.

Passaggio 2: inserire l'intestazione

Successivamente, aggiungi un'intestazione all'interno del ""Elemento utilizzando il"

"Tag. Successivamente, aggiungi un po 'di testo tra i tag "":

Immagine di sfondo

Immagine colorata di foglie impostata come sfondo di questa pagina. Ora possiamo fare qualsiasi documento in questa pagina.

Passaggio 3: impostare l'immagine di sfondo

Per impostare l'immagine di sfondo dell'elemento, accedere prima l'elemento con l'aiuto di "id"Attributo. Quindi, aggiungi il "immagine di sfondo"Proprietà CSS per impostare l'immagine sul retro dell'elemento. Il valore di questa proprietà specifica l'URL dell'immagine.

PASSAGGIO 4: Rendi reattiva l'immagine di sfondo

Per rendere reattiva l'immagine di sfondo, inserire le seguenti proprietà CSS:

#img-background
Immagina di background: URL ('Emoji.png ');
Altezza: 100%;
larghezza: 100%;
Size di sfondo: copertina;
Ripeat background: no-ripetizione;
Bordo: rosso solido automatico;

La descrizione del codice sopra indicato è menzionata come segue:

• IL "altezza"Proprietà utilizzata per impostare l'altezza dell'elemento.
• "larghezza"La proprietà viene utilizzata per definire l'orizzontale delle dimensioni dell'elemento.
• "Size di sfondo"La proprietà viene utilizzata per impostare le dimensioni dell'immagine. Ad esempio, abbiamo il suo valore come "copertina"Per riempire l'immagine nell'elemento.
• "Ripeat di sfondo"La proprietà imposta se l'immagine si ripeterà o meno.
• "confine"La funzione viene utilizzata per l'aggiunta del bordo attorno all'elemento.

Si può osservare che abbiamo reso reattivo l'immagine di sfondo:

Abbiamo spiegato il metodo per aggiungere un'immagine di sfondo reattiva con CSS.

Conclusione

Per aggiungere l'immagine di sfondo CSS reattiva, prima, crea un contenitore insieme all'attributo "ID". Quindi, accedi all'elemento Div usando "ID" in CSS e incorpora l'immagine di sfondo usando "immagine di sfondo"Proprietà CSS. Dopo di che, "Size di sfondo","Ripeat di sfondo", E "confine"Le proprietà vengono anche utilizzate per rendere l'immagine reattiva. Questo post ha dimostrato come impostare l'immagine di sfondo reattiva in CSS.