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

Demonstração do Backbround responsivo

ScreenShot

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

<!-- omiti o conteúdo desnecessário  -->
<body>
	<!-- O header contém todo o código que queremos estudar neste exemplo -->
	<header class="header fullheight">
		<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 -->

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

/* No aruivo css este é o conteúdo que mais nos interessa */
.fullheight {
	/*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("image/cerca-2000.jpg");
	/*deixa o background com efeito paralax*/
	background-attachment: fixed;
	/* cover é para nunca deixar espaço sem imagem*/
	background-size: cover;
}
/* aqui troco a imagem pra cada resolução na ordem do maior pro menor */
@media screen and (max-width: 1500px) {
	.header.fullheight {
		background-image: url("image/cerca-1500.jpg");
	}
}
@media screen and (max-width: 1000px) {
	.header.fullheight {
		background-image: url("image/cerca-1000.jpg");
	}
}
@media screen and (max-width: 800px) {
	.header.fullheight {
		background-image: url("image/cerca-800.jpg");
	}
}
@media screen and (max-width: 600px) {
	.header.fullheight {
		background-image: url("image/cerca-600.jpg");
	}
}
@media screen and (max-width: 400px) {
	.header.fullheight {
		background-image: url("image/cerca-400.jpg");
	}
}
@media screen and (max-width: 320px) {
	.fullheight {
		background-image: url("image/cerca-320.jpg");
	}
}

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 queir ver o resultado final baixe os arquivos de exemplo que está depois dos Artigos semelhantes, aproveite e deixe um comentário do que achou.

Um forte abraço.

 

Background full responsivo
Background full responsivo
full-background.zip
2.7 MiB
282 Downloads
Details