L'immagine di sfondo HTML- CSS non viene visualizzata

CSS offre molte proprietà di styling per elementi HTML. Più specificamente, l'aggiunta di immagini di sfondo utilizzando CSS è una delle attività di progettazione importanti. Tuttavia, lavorare con immagini di sfondo a volte può essere impegnativo. Questo perché molti altri fattori possono impedire la visualizzazione dell'immagine di sfondo.

Questo post coprirà quanto segue:

• Come impostare correttamente l'URL dell'immagine?
• Come impostare la dimensione dell'elemento genitore dell'immagine?
• Come collegare correttamente il file CSS?
• Come impostare CSS "sfondo" proprietà?

Come impostare correttamente l'URL dell'immagine?

L'immagine di sfondo non si carica sul browser se l'URL dell'immagine non è corretta. Analizza l'esempio discusso di seguito per conoscere il problema con la soluzione pertinente.

Esempio

In HTML, aggiungi un ""Elemento e assegnarlo la classe"banner-img":

Classe "Banner-IMG" di stile

.banner-img
larghezza: 400px;
Altezza: 300px;
Immagina di sfondo: URL (/IMG/LIGHT-BULBS-5488573_1920.jpg);
Size di sfondo: copertina;

Secondo lo snippet di codice dato:

• "larghezza"Determina l'ampiezza dell'elemento.
• "altezza"Regola l'altezza dell'elemento.
• "immagine di sfondo"Specifica l'URL dell'immagine.
• "Size di sfondo"Con il valore"copertina"Si adatta all'immagine nell'intero contenitore.

Produzione

Se si aggiunge l'URL dell'immagine sbagliata come menzionato nel blocco di codice seguente, si verificherà l'errore 404:

.banner-img
larghezza: 400px;
Altezza: 300px;
Immagina di background: URL (/IMG/Bulbs-5488573_1920.jpg);
Size di sfondo: copertina;

Fare clic con il tasto destro sulla pagina Web e selezionare "ispezionare"Opzione, la finestra dello strumento dello sviluppatore mostrerà lo stato della risorsa:

Come impostare la dimensione dell'elemento genitore dell'immagine?

A volte, l'immagine non riesce a caricare sulla pagina Web se la dimensione del suo elemento principale non è impostata.

Analizzare l'esempio di seguito.

Esempio

Aggiungere un ""Elemento e assegnarlo la classe"Banner":

.contenuto
Immagina di sfondo: URL (/IMG/LIGHT-BULBS-5488573_1920.jpg);
Size di sfondo: copertina;
larghezza: 400px;
Altezza: 500px;

Qui:

• "immagine di sfondo"Imposta l'URL dell'immagine di sfondo.
• "Size di sfondo"Imposta le dimensioni dell'immagine. Più specificamente, il "copertina"Il valore copre l'intero contenitore.

Produzione

Come collegare correttamente un file CSS?

Se si utilizza il foglio di stile esterno, assicurati che ""L'elemento deve essere correttamente specificato. Il nome del file deve essere correttamente specificato in "Href"Attributo:

Come impostare le proprietà "di fondo" CSS?

Il CSS "sfondo"Le proprietà devono essere adeguatamente specificate agli elementi:

.banner-img
Margine: auto;
larghezza: 400px;
Altezza: 250px;
Immagina di sfondo: URL (/IMG/LIGHT-BULBS-5488573_1920.jpg);
Size di sfondo: copertina;
Posizione di background: centro;
Ripeat background: no-ripetizione;

Qui:

• "immagine di sfondo"Specifica l'URL dell'immagine di sfondo.
• "Size di sfondo"Imposta le dimensioni dell'immagine di sfondo.
• "posizione in background"Regola la posizione dell'immagine di sfondo.
• "Ripeat di sfondo"Determina se l'immagine viene ripetuta o meno.

Il CSS "sfondo"La proprietà può essere specificata come proprietà stenografica come questa:

Sfondo: URL (/IMG/Light-Bulbs-5488573_1920.jpg) centro/copertura no-ripetizione;

Nota: La posizione di sfondo e la dimensione dello sfondo devono essere separate dal "/"Slash come menzionato nel blocco del codice sopra. Altrimenti, non visualizzerà l'immagine.

Per verificare, ispezionare la pagina e osservare la finestra dello strumento sviluppatore, vedrai quanto segue:

Questi sono i motivi e le correzioni per l'immagine di sfondo CSS che non visualizza il problema.

Conclusione

Per caricare correttamente l'immagine di sfondo, devono essere considerati molti fattori. Questi includono l'impostazione corretta dell'URL dell'immagine, la regolazione della larghezza e dell'altezza dell'elemento genitore, incluso correttamente il collegamento del foglio di stile esterno e specificando il CSS "sfondo"Proprietà correttamente. Questo post ha spiegato le correzioni per le immagini di sfondo che non visualizzano il problema.