Maneira correta de colocar uma imagem de background responsiva

Front-end
, , ,
#1

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:

image
image.png1366×639 17.4 KB

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?

#2

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

1 curtida
#3

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?

#4

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.

1 curtida
#5

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.

#6

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/

#7

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.

1 curtida
#8

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

1 curtida
#9

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)

1 curtida
#10

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

#11

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.

1 curtida
#12

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

1 curtida
#13

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/

3 curtidas
#14

Muito bom, vou fazer desse jeito.

#15

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

1 curtida
#16

Eu acabei de implementar, funcionou perfeitamente!

1 curtida
#17

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