Imagem preencher a tela inteira com CSS

Gunnar CorreaGunnar Correa05/11/2020 às 21:00:19 - 154 acessos

Simples regras do CSS permite aplicar imagem de fundo da página ou em elementos.


Em vários momentos, precisamos que uma imagem preencha toda a tela, seja como um background para o body, ou para uma div que está definida com N pixels de largura/altura, por exemplo.

A partir do CSS 3, a gente tem a nossa disposição, o valor cover para a propriedade background-size, que faz com que uma imagem preencha toda a tela.

Assista a nossa videoaula abaixo e veja dois exemplos de aplicação, para fazer uma imagem preencher todo um elemento.

Viewport Size

Para fazer com que um elemento tenha todo um tamanho de altura da página, podemos usar a medida em vh, já para a largura, usamos o vw.

Ambas as unidades de medidas, se relacionam a área visível do browser e não a resolução em X/Y do dispositivo.

vh = Viewport height
vw = Viewport width


Códigos

Abaixo está disponível os dois códigos utilizados na aula, o primeiro, mostra a aplicação para o corpo da página, enquanto o segundo, aplica em uma div com largura e altura de 100% nas suas respectivas viewport.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background image</title>

    <style>
        body {

            background-image: url("img/the_wicther.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .max-width {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
        }
    </style>
</head>

<body>

    <div class="max-width">
        adasdsas
    </div>
</body>

</html>


index2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background image exemplo 2</title>

    <style>
       body{
           overflow: hidden;
           padding: 0;
           margin: 0;
       }

        .max-width {
            background-image: url("img/the_wicther.png");
            background-size: cover;
            background-repeat: no-repeat;

            width: 100vw;
            height: 100vh;
            margin: 0 auto;
            background-color: #fff;
        }
    </style>
</head>

<body>

    <div class="max-width"></div>
</body>

</html>

Então por hora é isso, nos vemos em breve.


css background image css imagem ocupar toda tela css imagem preencher tela css viewport width css viewport height

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.