Con l'aiuto dell'attributo "background-image", puoi assegnare un'immagine di sfondo a qualsiasi elemento del tuo documento HTML. Nella maggior parte dei casi, le immagini sono utilizzate per riempire lo sfondo. Naturalmente, è una questione di gusto se volete assegnare solo un colore allo sfondo o riempirlo con un'immagine.
Questo è quello che devi tenere a mente quando usi un'immagine di sfondo in HTML
Assegnare un'immagine usando l'attributo non è sufficiente. Per default, sarà formattato in un modo in cui molto probabilmente non vuoi e non puoi usare l'immagine.
- Per usare l'attributo "background-image", devi specificarlo direttamente nel tag di apertura dell'elemento: [<body style= "background-image: url("PATH");">].
- Puoi anche specificare diverse immagini in una riga negli attributi. In questo caso, il primo nome è posto in alto, cioè usato un livello più in alto.
- Le immagini di sfondo possono avere trasparenza. Nei posti trasparenti, o viene visualizzata un'altra immagine o viene riprodotto il colore dello sfondo.
Come visualizzare correttamente l'immagine?
Siccome le immagini visualizzate dall'attributo "background-image" sono posizionate di default nell'angolo superiore sinistro della finestra e poi ripetute all'infinito, è necessaria una certa formattazione.
- Inoltre, usa l'attributo "background-size: cover" in modo che l'immagine sia allungata su tutto lo schermo.
- Inoltre, puoi usare "background-repeat: no -repeat" per evitare che lo sfondo sia ripetuto un numero infinito di volte.
- Puoi anche usare l'attributo "background-image: linear-gradient()" per avere un gradiente lineare creato come sfondo.