Como fazer uma imagem de fundo preencher a tela inteira sem perder a resolução

Neste artigo veremos como fazer uma imagem de fundo preencher a tela inteira, sem ela perder a sua resolução, de uma maneira muito simples com CSS puro.

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender coisa nova!

Para resolver este problema, primeiro precisamos ter um container que preencha a tela toda

Podemos utilizar a unidade de media vh, view height, que com o valor de 100 consegue fazer isso

E da mesma maneira uma media de vw, view width, com o valor de 100 para a largura

Depois e não menos importante, é preciso ter uma imagem grande o bastante para comportar as diversas resoluções existentes

Pode parecer bobo este detalhe, mas muitas pessoas se esquecem disso e é este o problema da imagem distorcer

E por último vamos inserir esta imagem com background via CSS, e adicionar uma propriedade chamada background-size com o valor de cover

Que fará com que a imagem preencha todo o container disponível, resolvendo nosso problema, vamos a um exemplo prático:

<!DOCTYPE html>
<html>
<head>
    <title>Como fazer uma imagem de fundo preencher a tela inteira</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="container-imagem"></div>
</body>
</html>

Este será nosso HTML, bem simples, contém apenas a div da imagem que preencherá a tela toda

E agora o primeiro passo do CSS:

body {
    margin: 0;
}
        
#container-imagem {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: red;
}

Com isso eliminamos uma margin descessária do body, e criamos o container que preenche a tela toda

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Agora toda sua tela deve estar vermelha, vamos fazer a alteração para a imagem:

body {
    margin: 0;
}
        
#container-imagem {
    position: relative;
    height: 100vh;
    width: 100vw;
    /* adicionando imagem de fundo */
    background: url('bg-img.jpg');
    background-size: cover;
}

Pronto, trocamos o background-color para as propriedades que mencionamos na introdução e agora o problema está resolvido 🙂

Dica: você pode posicionar melhor sua imagem com a regra background-position