Imagem preencher a tela inteira com CSS

CursoPHP Moderno: Criando uma aplicação com área administrativa

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.