Como criar: Imagem de fundo da página completa

Aprenda a usar CSS para criar imagens de fundo de página completa.

Imagem de fundo da página completa

Aprenda a criar imagens de fundo que cobrem toda a janela do navegador. O exemplo a seguir mostra imagens de fundo responsivas (e de metade da tela) em tela cheia:

Demonstração - Imagem de fundo da página completa

Demonstração - Imagem de fundo de metade da página

Como criar uma imagem de altura total

Use um elemento de contêiner e adicione uma imagem de fundo de 100% de altura ao contêiner.

Dica:Usar 50% pode criar uma imagem de fundo de metade da página. Em seguida, use os seguintes atributos de fundo para centralizar e escalar a imagem perfeitamente:

Atenção:Para garantir que a imagem cubra toda a tela, você também deve definir height: 100% aplicados simultaneamente a <html> e <body>:

Imagem de fundo da página completa:

body, html {
  height: 100%;
}
.bg {
  /* Imagem usada */
  background-image: url("dancer.jpg");
  /* Tamanho total */
  height: 100%;
  /* Bem centralizado e escalado a imagem */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Experimente você mesmo

Imagem de fundo de meia página:}

.bg {
    height: 50%;
}

Experimente você mesmo