Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kaiquemix

DIV com imagem na Tela inteira

Por , em Desenvolvimento frontend

Recommended Posts

kaiquemix    1

kaiquemix
Postado

Olá pessoal não estou conseguindo fazer uma DIV onde a imagem vai pegar a tela inteira independente da resolução.

No meu caso quero fazer um site que vai ter 2 divs, sendo que uma embaixo da outra onde cada uma vai ocupar a tela inteira.

<body>
   <div id="part1">

    </div>
   <div id="part2">

    </div>
    </body>



#part1{ width: 100%; background: url("../img/fundo.png"); background-size: cover; }



#part2{
width: 100%;
background: url("../img/fundo2.png");   
    background-size: cover;
}




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					






					
				
					
					
					







	

	

		

			
tmalexandre
			  

	
		
	
			 2
	
		
	

		

		

			


	
		tmalexandre
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

O problema ai é mais fácil do que parece. Está faltando você dizer para seu ID qual é a altura.


Coloque um "height" que funciona tranquilo.


 


Abraço...



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
L. Henrique
			  

	
		
	
			 179
	
		
	

		

		

			


	
		L. Henrique
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Para que uma imagem possa ocupar 100% do seu "viewport" tente trabalhar o height com 'vh' e não com porcentagens.

Siga um trecho extraído do site Desenvolvimentoparaweb:




 


Muitas técnicas de web design responsivo dependem muito de regras percentuais. No entanto, medidas CSS percentuais nem sempre são a melhor solução para todos os problemas. width em CSS é relativo ao elemento-ancestal mais próximo. Mas e se você quisesse usar a largura ou a altura da viewport ao invés da largura do elemento-pai? Isso é exatamente o que as unidades vh e vw proporcionam.


 


A medida vh é igual a 1/100 da altura da viewport. Então, por exemplo, se a altura do navegador é 900px, 1vh equivale a 9px e, analogamente, se a largura da viewport é 750px, 1vw equivale a 7.5px.




 


Bem, caso queira ver um exemplo do que pediu, segue aqui a DEMO.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					







	

	

		

			
Diegus Miestro
			  

	
		
	
			 21
	
		
	

		

		

			


	
		Diegus Miestro
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Olha se isso no começo do CSS resolve algo, já que pode precisar do elemento pais como referência.


html, body{position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; top:0; left:0;}


O meu ficou assim: http://jsfiddle.net/8nLz4gsq/



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito