Maneira correta de colocar uma imagem de background responsiva

14 de fevereiro de 2018 16 respostas Resolvido

Thallysson 14 de fevereiro de 2018

Eu estava me perguntando…como fazem os devs para colocar uma imagem no plano de fundo do site, mas que só seja vista antes de o usuário rolar a página…aquelas imagens que ficam no topo cobrindo exatamente (ou quase) toda a janela do navegador mas tem mais conteúdo no site…eu fiz um exemplo:

Como podem ver pela barra de rolagem, há mais conteúdo no site pra baixo, porém a imagem cobre tudo no início. Eu estou usando Bootstrap para que meu site seja responsivo, porém para fazer isso (como eu não conheço uma maneira “correta”) eu simplesmente gerei uma imagem exatamente do tamanho da janela do navegador. Mas como vocês já devem imaginar, isso tira completamente a responsividade do site porque em uma tela menor a imagem vai continuar do mesmo tamanho.

O motivo pelo qual criei este tópico é para saber se alguém conhece uma maneira “correta” de fazer isso sem perder a responsividade?

16 Respostas

Johnatan_Marinho 14 de fev. de 2018 1 like

Com o background-size: contain sua imagem deve manter a responsividade

Thallysson 14 de fev. de 2018

Blz, mas eu precisaria criar uma div…para ficar desse jeito eu teria que alterar o tamanho, certo? Mas alterar o tamanho das coisas para valores exatos faz com que não tenha responsividade. Como eu poderia fazer para essa div ficar do tamanho ideal sem ter que alterar height e width?

N4TH 14 de fev. de 2018 1 like

Vc já tentou adicionar o heigth: auto; Ela deixa imagem do tamanho certo.
Pras divs ficar reponsive,
So altera o max-width: 100%;

Usa a @media Screen, pra deixar td reponsive.

Thallysson 14 de fev. de 2018

Height: auto? Se eu deixar o navegador setar o tamanho, ele não vai simplesmente colocar o menor tamanho possível (ou o que a imagem precisar)? Se for assim dá na mesma do que do jeito que estou fazendo pois afinal quem vai mandar vai ser o tamanho da imagem. Sobre a div…largura não é o problema, o problema é a altura.

javaflex 15 de fev. de 2018

Voce pode setar a altura de acordo com a altura da janela. Exemplo:

$(document).ready(function() {
   var alturaJanela = $(window).height();
   var alturaMenu = $("#menu").height();
   var alturaImagem = alturaJanela - alturaMenu;
   
   $("#imagem").css("height", alturaImagem + "px");
});

https://jsfiddle.net/3a9uw7tr/

wldomiciano 15 de fev. de 2018 1 like

Primeiro: Sua imagem não precisa ter o tamanho exato da tela.

Peque uma resolução tipo Full HD (1920x1080) ou 4K ou alguma outra de sua escolha e defina a altura ou largura pra 100% que o navegador faz o trabalho pra vc.

Não faria sentido eu, como usuário, ter que baixar sua imagem em 4K (que fica perfeita em monitores com alta resolução) se eu estiver acessando seu site do meu smartphone, por isso, pesquise sobre o atributo srcset.

Com srcset vc pode definir imagens diferentes dependendo do tamanho do seu viewport. Eu nunca usei e não sei explicar direito, mas separei o link abaixo que fala um pouco sobre como usá-lo.

Depois disso, basta usar Media Queries como a @N4TH sugeriu para determinar os pormenores da exibição da sua imagem.

Por exemplo, vc tem uma imagem gigante mostrando uma paisagem como home do seu site quando visto em dispositivos em modo paisagem com resolução de 1920x1080, mas se vc estiver num celular em modo retrato, pode ser mais interessante esconder/cortar as laterais dessa imagem dando enfase no que tem mais ao centro dela.

John-Jones 15 de fev. de 2018 1 like

Talvez um jeito seria você usar a tag picture do html, e usar Media Queries para controlar.

Johnatan_Marinho 15 de fev. de 2018 1 like

height: auto vai ajustar a aultura da imagem com relação a largura.
vc pode trabalhar também com porcentagem e com a altura do viewport (% e vh)

Thallysson 15 de fev. de 2018

Boa, acho que essa é a melhor solução. Vou tentar aqui com o placehold.it.

Thallysson 15 de fev. de 2018 1 like

Bom pessoal, muito obrigado por todas as respostas. A partir delas cheguei a uma solução. Código:

<picture>
     <source media="(min-width: 1366px)" srcset="http://placehold.it/1366x768">
     <source media="(min-width: 768px)" srcset="http://placehold.it/768x1024">
     <source srcset="http://placehold.it/360x640">
     <img src="http://placehold.it/360x640">
 </picture>

Eu testei aqui. Em cada tipo de tela abriu a imagem correta, no desktop, no tablet e no celular.

John-Jones 16 de fev. de 2018 1 like

Boa, veja se ha alguma resposta que ajudou e marca o tópico como solucionado.

Solucao aceita

anon30449818 18 de fev. de 2018 3 likes

Eu recomendaria que você use media queries e configure altura com a unidade vh.
Desse maneria, o código esperado é esse:

.container{
    background-image: url('img/banner-xs.jpg');
    background-size: cover;
    height: 100vh;
}

@media (min-width: sm) {
    .container{
        background-image: url('img/banner-sm.jpg');
    }
}

@media (min-width: md) {
    .container{
        background-image: url('img/banner-md.jpg');
    }
}

@media (min-width: lg) {
    .container{
        background-image: url('img/banner-lg.jpg');
    }
}

Nessa abordagem, temos o seguinte:

Breakpoints para carregarmos o banner de diferentes tamanhos, em diferentes viewports;
- Assim, reduziremos o consumo de dados do usuário e o tempo de carregamento.
Propriedade background-size com valor cover;
- Dessa maneira, a imagem cobrirá todo o container, mas não irá distorcer;
- Não troque pelo valor contain, nesse caso, porque a imagem irá se distorcer.
Altura de 100vh.
- Essa unidade garante que a div tenha a altura total da viewport e, não do documento;
- Isso é o que você irá usar, para que a imagem cubra o topo todo, como falou.

Você ainda poderia usar a abordagem do @wldomiciano. No entanto, estamos falando de uma imagem para decoração, portanto, é melhor colocá-la em background para que o nosso HTML tenha menos porcaria e mais semântica.

Esse link tem uma demonstração: https://jsfiddle.net/ehedk2rf/24/

Thallysson 18 de fev. de 2018

Muito bom, vou fazer desse jeito.

anon30449818 18 de fev. de 2018 1 like

Espero que tenha entendido a abordagem.
Caso contrário, pode me perguntar.

Thallysson 20 de fev. de 2018 1 like

Eu acabei de implementar, funcionou perfeitamente!

Ernesto_Magalhaes 23 de abr. de 2020

Não funcionou no celular. A imagem não redimensionou.

Criado 14 de fevereiro de 2018

Ultima resposta 23 de abr. de 2020

Respostas 16

Participantes 8

16 Respostas

Topicos relacionados