Artigo original: CSS Background Image Size Tutorial – How to Code a Full Page Background Image

Este tutorial mostrará a você um modo simples de inserir uma imagem de fundo de página inteira usando o CSS. Você também aprenderá como tornar essa imagem responsiva para o tamanho de tela dos usuários.

Fazer com que uma imagem de fundo se estique para cobrir todo a viewport (que podemos traduzir como "área visível") do navegador é uma tarefa comum em design para a web. Felizmente, essa tarefa pode ser feita em poucas linhas com o CSS.

Cobrir a viewport com uma imagem

Primeiro, nos certificamos que nossa página cobre de fato toda a viewport:

html {
   min-height: 100%;
}

Dentro de html, usamos a propriedade background-image para definir a imagem:

background-image: url(imagem.jpg); /*substitua imagem.jpg pelo caminho de sua imagem*/

A magia da propriedade 'background-size'

A magia acontece com a propriedade background-size:

background-size: cover;

cover informa ao navegador que ele deve se certificar de que a imagem cobrirá sempre o contêiner inteiro (nesse caso, todo o html). O navegador cobrirá todo o contêiner, mesmo que precise esticar a imagem ou cortar parte dela que esteja fora dos limites do contêiner.

Como o navegador pode esticar a imagem, recomendamos uma imagem de fundo que tenha uma resolução alta o suficiente. Caso contrário, a imagem poder ter uma aparência pixelada.

Se você dá importância a ter toda a imagem aparecendo ao fundo, certifique-se também de que a imagem está relativamente próxima em termos de proporção à proporção do tamanho da tela.

Como ajustar ao máximo a posição de uma imagem para evitar que ela apareça repetidas vezes

O navegador também pode escolher exibir sua imagem de fundo como blocos, dependendo do tamanho. Para evitar que isso aconteça, use no-repeat:

background-repeat: no-repeat;

Para deixar tudo bonito, mantemos nossa imagem sempre centralizada:

background-position: center center;

Isso centralizará a imagem na horizontal e na vertical sempre.

Agora, produzimos uma imagem totalmente responsiva que sempre cobrirá todo o fundo:

html {
   min-height: 100%;
   background-image: url(image.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

Como deixar uma imagem fixa ao rolar a tela

Agora, apenas para o caso de você querer adicionar texto sobre a imagem de fundo e de o texto passar dos limites atuais da viewport, você pode tentar garantir que a imagem permaneça ao fundo quando o usuário rolar para baixo para ver o resto do texto:

background-attachment: fixed;

Você pode incluir todas as propriedades do fundo (em inglês, background) descritas usando uma notação abreviada:

background: url(imagem.jpg) center center cover no-repeat fixed;

Opcional: como adicionar uma media query para dispositivos móveis

Para dar um toque final à receita, podemos adicionar uma media query para telas menores:

@media only screen and (max-width: 767px) {
  html {
     background-image: url(imagem-menor.jpg);
  }
}

Você pode usar o Photoshop ou outro software de edição de imagem para reduzir o tamanho original da imagem para melhorar a velocidade de carregamento da página em conexões de internet de dispositivos móveis.

Agora que você conhece a magia da criação de uma imagem de fundo de página inteira e responsiva, é hora de criar alguns sites lindos para a web!

Quer saber mais sobre dicas e conhecimento relativo ao desenvolvimento para a web?