CSS HTML

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

17 de abril de 2020

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.

imagem de fundo preenchendoa tela capa

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

Conclusão

Neste artigo vimos como fazer uma imagem de fundo preencher a tela inteira sem perder a qualidade ou distorcer

Primeiro criamos um container que preenche a tela toda com vw e vh

Depois adicionamos a imagem de fundo via CSS com a propriedade background

E por fim adicionamos background-cover para a imagem preencher a tela inteira ou o container todo

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Thais Carolyne Souza

Muito obrigada! Me ajudou d+!

Battisti

de nada!

2
0
Would love your thoughts, please comment.x