Imagens de fundo ficando minúsculas no mobile

[mruoppolo 14]

Olá, tudo bem?

 

Estou criando um site para um cliente e faz muito tempo que não trabalho com frontend, ai pra desktop ficou legal, porém no mobile as imagens de fundo das divs estão ficando minúsculas e o site esta terrível, alguém pode me dizer como faço pros background não ficarem minúsculos no mobile, outra coisa o designer desenhou essas divs que tem background com 600px de altura, porém quando eu monto não fica nem a pau, como eu faço pra ficar??

 

O site é esse: http://marcelloruoppolo.com.br/projetos/buscacorrespondentes/home.php

 

Muito obrigado, qualquer dica que possam me dar sobre o mobile eu agradeço, tem 2 anos que não trabalho com frontend. :D

 

[L. Henrique 179]

Quando você trabalha com background images, deve entender que nem sempre ele vai caber em todas as resoluções, então você precisa de um pouco de conhecimento em PS e CSS.

Porquê o PS?

• Você vai precisar utilizar a regra dos "Três Terços". Ou seja, deixar em "destaque" o que mais for importante na imagem e que caiba em qualquer resolução.

Porquê o CSS?

• Você vai precisar definir largura e altura da div e também dizer a imagem qual será o foco dela quando a imagem for reduzida, exemplo:

• .div {
     background: url('link') no-repeat center center;
     background-size: cover;
  }
  

  Com o background-size: cover, eu cubro toda a extensão da div. Isso é simples. Agora quanto ao foco do que é importante na imagem você encontra no "center center", ou seja, quando a tela for reduzida, o ponto de foco será o centro na vertical total e o centro da horizontal total.

É nesse ponto do CSS que entra a regra dos três terços. Se o foco principal for o centro, então na imagem deixe o que for importante no centro.

Essas são regras básicas. Você pode tentar fazer uma gambiarra com CSS e ir ajustando ou até mesmo trocando a imagem conforme X pixels for de largura, mas vamos concordar que não seria muito limpo ou até mesmo eficiente em questão de código/layout e performance.

Abraços!

[mruoppolo 14]

Cara, concordei muito contigo, mas assim, nunca ouvi falar de PS, é que na verdade eu estava a 2 anos sem fazer front-end e o cara da minha agência ta de licença ai agora eu to tendo que correr com isso pra entregar hoje kkkk

 

O que é esse PS?

 

Valeu

[L. Henrique 179]

Perdão, esqueci de especificar no meu comentário. ahsuhuashuahushaushuahusas

PS = Photoshop.

Ah, segue uns sites onde você pode entender a regra dos três terços:

• http://www.dicasdefotografia.com.br/a-regra-dos-tercos-na-fotografia/
• http://omeuolhar.com/artigos/que-regra-tercos
• http://www.infoescola.com/fotografia/regra-dos-tercos/

Abraços!

[mruoppolo 14]

Cara valeu mesmo :D