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?
- Inscreva-se na newsletter semanal do autor
- Visite o blog do autor, 1000 Mile World
- Siga o autor no Twitter