In HTML, le immagini di sfondo vengono utilizzate per modellare e migliorare l'aspetto delle pagine Web. Per impostazione predefinita, le immagini della pagina Web vengono visualizzate nell'angolo in alto a sinistra dello schermo. Tuttavia, è possibile ridimensionare l'immagine in modalità a schermo intero. CSS fornisce "posizione in background" E "Size di sfondo"Proprietà che possono essere utilizzate per costringere un'immagine a visualizzare su tutto lo schermo.

In questo manuale, imparerai il metodo per aggiungere un'immagine di sfondo in modalità a schermo intero.

Iniziamo!

Come realizzare l'immagine di sfondo a schermo intero usando CSS?

Per creare lo sfondo a schermo intero usando CSS, in primo luogo, creare un div e regolare la sua larghezza e altezza e margine per farlo apparire sullo schermo intero usando "larghezza","altezza", E "margine"Proprietà di CSS. Quindi, aggiungi un bordo attorno ad esso usando il "confine" proprietà. Per impostare il bordo secondo lo schermo, utilizzare il "dimensionamento della scatola" proprietà. Una volta fatto, utilizzeremo la proprietà di "sfondo"Per aggiungere l'immagine in background.

La sintassi della proprietà di fondo è:

Background: Image Background (URL) Riepeat Background-Posizione di sfondo/ Background Size

Nella sintassi di cui sopra, sono menzionate le seguenti quattro proprietà della proprietà di fondo:

• immagine di sfondo: Viene utilizzato per aggiungere un'immagine come sfondo.
• REPEATTO SCHEDA: Viene utilizzato per impostare il modello della ripetizione dell'immagine di sfondo, come no-ripeat, ripetere in orizzontale e ripetere verticalmente.
• Posizione di background: Viene utilizzato per regolare la posizione dell'immagine, come centro, sinistra e destra.
• Size di sfondo: Viene utilizzato per impostare le dimensioni dell'immagine, come auto, copertura e lunghezza.

Passiamo all'esempio in cui faremo un'immagine di sfondo a schermo intero usando CSS.

Esempio

Nell'HTML, creeremo un contenitore e imposteremo il suo nome di classe come "div"E aggiungi l'intestazione usando il

etichetta. Inoltre, per posizionare l'intestazione al centro della pagina, useremo il tag.

Html

Benvenuti in Linuxhint

Quindi, assegnare il valore della proprietà margin come "0"E altezza come"100px"Per tutto il corpo dell'HTML.

CSS

html, corpo
Margine: 0;
Altezza: 100%;

Nel passaggio successivo, modella il contenitore creato usando "div"E regola la larghezza e l'altezza del div come"100px". Useremo la proprietà del bordo per aggiungere il bordo attorno al div con "25px"Larghezza, stile come"scanalatura"E il colore del bordo come"RGB (184, 147, 147)":

div
larghezza: 100%;
Altezza: 100%;
Border: 25px Groove RGB (184, 147, 147);

Il risultato del codice sopra menzionato è riportato di seguito. Puoi vedere che sono creati l'intestazione e il bordo:

Nota: Come puoi vedere, nel bordo dell'immagine sopra fornito dalla destra e dal fondo è nascosto, questo perché la larghezza e l'altezza del div sono già "100%", Quindi quando aggiungiamo un bordo, verranno aggiunte larghezza e altezza aggiuntive. Per evitare questo, useremo il "dimensionamento della scatola"Proprietà di CSS in quanto ci consente di includere un bordo nella larghezza e nell'altezza dell'elemento.

Per fare ciò, imposteremo il valore del dimensionamento della scatola come "Border-Box"Per includere il bordo all'interno della larghezza totale e dell'altezza del div:

Dimensizzazione di scatole: bordo-box;

L'immagine di seguito indicata indica che il bordo viene posizionato con successo all'interno della larghezza e dell'altezza del div:

Ora aggiungeremo l'immagine di sfondo usando "immagine di sfondo"Proprietà e specificare l'URL dell'immagine in esso come"URL (immagine.jpg)":

div
Sfondo: URL ("Immagine.jpg ");

Nell'immagine sotto fornita, puoi vedere che l'immagine di sfondo viene aggiunta correttamente, ma è ripetitiva:

Per evitare la ripetizione dell'immagine, il “Ripeat di sfondo"La proprietà viene utilizzata. Qui, imposteremo il valore di Background Ripeat come "no-ripeat":

div
Immagina di sfondo: URL ("Immagine.jpg ");
Ripeat background: no-ripetizione;

Nell'output sotto fornito, puoi vedere che la ripetizione dell'immagine viene fermata; Tuttavia, l'immagine non viene visualizzata sullo schermo:

Per visualizzare l'immagine sullo schermo intero, utilizzeremo il “Size di sfondo" proprietà. E imposta il suo valore come "copertina", Il che significa che l'immagine coprirà l'intera area del contenitore creato:

div
Immagina di sfondo: URL ("Immagine.jpg ");
Ripeat background: no-ripetizione;
Size di sfondo: copertina;

L'immagine seguente indica che l'immagine viene visualizzata sullo schermo e viene tagliata. Questo perché la dimensione dell'immagine è maggiore della dimensione Div:

Per risolvere questo problema, usa il "posizione in background"Proprietà e imposta la posizione dell'immagine come"centro":

div
Immagina di sfondo: URL ("Immagine.jpg ");
Ripeat background: no-ripetizione;
Size di sfondo: copertina;
Posizione di background: centro;

Di conseguenza, l'immagine selezionata verrà visualizzata in modalità a schermo intero:

Questo è tutto! Abbiamo spiegato il metodo per creare un'immagine di sfondo a schermo intero usando CSS.

Conclusione

Per creare un'immagine di sfondo a schermo intero usando CSS, in primo luogo, creare un div e impostare la larghezza, l'altezza e i margini per riempire lo schermo. Dopodiché, crea un bordo attorno al div, quindi aggiungi un'immagine usando "immagine di sfondo" proprietà. Per regolare l'immagine in base allo schermo intero, utilizzare il “Ripeat di sfondo","Size di sfondo", E "posizione in background" proprietà. Questo articolo ha spiegato il metodo completo per creare l'immagine di sfondo a schermo intero usando CSS.