Como fazer - Imagem de página inteira
Aprenda a criar uma imagem de fundo de página inteira com CSS.
Imagem de página inteira
Saiba como criar uma imagem de plano de fundo que cubra toda a janela do navegador. O exemplo a seguir mostra uma imagem de plano de fundo responsiva de tela inteira (e meia tela):
Demonstração - Imagem de fundo de página inteira
Demo - Imagem de fundo de meia página
Como criar uma imagem de altura total
Use um elemento de contêiner e adicione uma imagem de plano de fundo ao contêiner com height: 100%
.
Dica: Use 50% para criar uma imagem de fundo de meia página. Em seguida, use as seguintes propriedades de plano de fundo para centralizar e dimensionar a imagem perfeitamente:
Observação: para garantir que a imagem cubra toda a tela, você também deve aplicar height: 100%
a <html> e <body>:
Exemplo
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;
}
Imagem de fundo de meia página:
Exemplo
.bg {
height: 50%;
}