Imagem preencher a tela inteira com CSS

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

Publicado em

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.

Gunnar Correa
Gunnar Correa

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

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção