Come creare: Immagine della pagina completa

Impara come creare un'immagine di sfondo della pagina completa utilizzando CSS.

Immagine della pagina completa

Impara come creare un'immagine di sfondo che copra l'intera finestra del browser. L'esempio seguente mostra un'immagine di sfondo responsiva per intera schermata (e metà schermata):

Dimostrazione - Immagine di sfondo della pagina completa

Dimostrazione - Immagine di sfondo di metà pagina

Come creare un'immagine completa di altezza

Utilizzare un elemento contenitore e aggiungere all'interno un'immagine di sfondo di altezza 100%.

Suggerimento:Utilizzando il 50% è possibile creare un'immagine di sfondo di metà pagina. Poi utilizzare i seguenti attributi di sfondo per posizionare e ridimensionare l'immagine perfettamente:

Attenzione:Per garantire che l'immagine copra l'intera schermata, è necessario anche impostare height: 100% applicato contemporaneamente a <html> e <body>:

Immagine di sfondo della pagina completa:

body, html {
  height: 100%;
}
.bg {
  /* Immagine utilizzata */
  background-image: url("dancer.jpg");
  /* Altezza completa */
  height: 100%;
  /* Ben posizionato al centro e ridimensionato l'immagine molto bene */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Prova da solo

Immagine di sfondo a mezza pagina:}

.bg {
    height: 50%;
}

Prova da solo