Dica quente galera, Background full size e responsivo apenas com CSS

Dica quente galera, Background full size e responsivo apenas com CSS

Dica quente galera, Background full size e responsivo apenas com CSS

Veja como criar uma área do tamanho da tela com uma imagem responsiva independente do tamanho.

Quanto maior for a dificuldade de executar determinada ação, maior é nossa criatividade, neste tutorial vou mostrar pra você como deixar uma imagem full size na entrada do seu site com um efeito paralax.

OS CONCEITOS UTILIZADOS AQUI

O primeiro problema é a relação peso/qualidade das imagens, em monitores grandes não queremos ter perda de qualidade com a imagem borrada e ao mesmo tempo não penalizar dispositivos móveis com imagens absurdamente grandes e pesadas que acabam consumindo muita memória e banda. Para solucionar isso usaremos o recurso @media do CSS informando ao navegador qual imagem ele deve utilizar para determinado tamanho de tela.
Segundo a altura da área deve sempre corresponder a toda a tela, sempre foi muito complicado porque não se tinha uma unidade que fizesse isso, por muito tempo usei JavaScript para isso, mas neste tutorial usaremos uma nova unidade de medida, a vh (Viewport Header) essa unidade é baseada na altura da janela do navegador em uma proporção equivalente a %, isso quer dizer que 100vh equivale a 100% da altura do janela do navegador, aqui não importa a medida em pixels, porém este recurso é bem novo e não funcionará em navegadores mais antigos, veja no site da W3Schools.com a relação dos navegadores suportados.

Terceiro é a relação da imagem com o tamanho da tela que pode ser retrato ou paisagem, para isso utilizaremos o background-size, podemos usar 100% que força a imagem a ocupar toda a área, mas a deixa distorcida, 100% auto faz com que a imagem tenha sempre 100% da largura e a altura proporcional, auto 100% fará com que a imagem se ajuste na altura e fique proporcional na largura, mas usaremos o cover que fará com que a imagem sempre ocupe toda a área sem distorcer

Por fim para o efeito paralax será feito com background-attachment: fixed.

OS ARQUIVOS

Para esta demonstração montei um html simples que mostrará a área da imagem com seu título e um simples conteúdo conteúdo.

/* No aruivo css este é o conteúdo que mais nos interessa */header {/*com isso o header ficará sempre com o tamanho da tela */height: 100vh;/*background geralmente uso o modo compacto, mas aqui vou colocar separadamente para explicar cada parte*//* aqui defino a imagem maior*/background-image: url("https://i.imgur.com/ws5AYs5.jpg");/*deixa o background com efeito paralax*/background-attachment: fixed;/* cover é para nunca deixar espaço sem imagem*/background-size: cover;}section {height: 100vh;background-size: cover;}.background-2 {background-image: url("https://i.imgur.com/jmvRSta.jpg");}.background-3 {background-image: url("https://i.imgur.com/4VhodzO.jpg");background-attachment: fixed;}.background-4 {background-image: url("https://i.imgur.com/bShIQDB.jpg");}h1 {font-family: 'Candal', sans-serif;font-size: 350%;font-weight: 400;color: #fff;text-align: center;letter-spacing: 1px;padding: 18%;}@media screen and (max-width: 700px) {h1 {font-size: 280%;}}@media screen and (max-width: 500px) {h1 {font-size: 240%}}@media screen and (max-width: 400px) {h1 {font-size: 150%;}}.inicio{position: fixed;bottom: 10px;left: 100px;}

 

Agora toda mágica vem com o css que usa recursos do css3, aqui vou destacar as partes principais comentadas:

<!-- O header contém todo o código que queremos estudar neste exemplo --><header><h1>Abra sua mente para infinitas possibilidades.</h1></header><!-- a partir deste ponto um conteúdo qualquer para fazer a página rolar, esta parte não tem nada de mais --><section class="background-2"><h1>Abra sua mente para infinitas possibilidades.</h1></section><section class="background-3"><h1>Abra sua mente para infinitas possibilidades.</h1></section><section class="background-4"><h1>Abra sua mente para infinitas possibilidades.</h1></section>

 

Como podemos ver essa é uma maneira muito simples de implementar algo que até pouco tempo só era possível com JavaScript, o efeito paralax poderia ficar melhor se utilizasse mais imagens, preferi manter assim para deixar o arquivo simples e fácil de entender, caso queira ver o resultado final baixe os arquivos de exemplo que está depois dos Artigos semelhantes, aproveite.