Escolha uma Página

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

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
full-background.zip
2.7 MiB
552 Downloads
Detalhes

Arquivos de exemplo para o fundo full e responsivo

Autor:Ronaldo C. Diniz
Categoria:Design
Data:12 de julho de 2015
Sair da versão mobile