Come fare per - Immagine a pagina intera
Scopri come creare un'immagine di sfondo a pagina intera con CSS.
Immagine a pagina intera
Scopri come creare un'immagine di sfondo che copra l'intera finestra del browser. L'esempio seguente mostra un'immagine di sfondo reattiva a schermo intero (e a metà schermo):
Demo - Immagine di sfondo a pagina intera
Demo - Immagine di sfondo di mezza pagina
Come creare un'immagine a tutta altezza
Usa un elemento contenitore e aggiungi un'immagine di sfondo al contenitore con height: 100%
.
Suggerimento: usa il 50% per creare un'immagine di sfondo di mezza pagina. Quindi utilizzare le seguenti proprietà di sfondo per centrare e ridimensionare perfettamente l'immagine:
Nota: per assicurarti che l'immagine copra l'intero schermo, devi applicare anche height: 100%
a <html> e <body>:
Esempio
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Immagine di sfondo a mezza pagina:
Esempio
.bg {
height: 50%;
}