Ir para conteúdo

POWERED BY:

Arquivado

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

Kaíque Luan

Background-Image tela inteira

Por , em Desenvolvimento frontend

Recommended Posts

Kaíque Luan    0

Kaíque Luan
Postado

Boa tarde,

 

 

Gostaria de saber como faço para deixar minha imagem da Background tomando a tela toda de qualquer monitor,

 

Link do site: http://luansdesigner.meximas.com/index.html

 

 

e se alguém poder postar algum site referenciado para estudar linguagens de programação web por favor ficarei muito grato.

 

Agradeço desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vitor RC    11

Vitor RC
Postado

Para colocar uma imagem tomando a tela toda no CSS:

body {
 background-image: url(suaimagem);
 

}

Ajustando a imagem para que não repita

body {
 background-repeat: no-repeat;


}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaíque Luan    0

Kaíque Luan
Postado

 

 


 

Para colocar uma imagem tomando a tela toda no CSS:

body {
 background-image: url(suaimagem);
 

}

Ajustando a imagem para que não repita

body {
 background-repeat: no-repeat;


}

 

 

 

 

 

Fiz isso, ela ficou com uma parte em branco no lado direito..

 

da uma olhada porfavor de como ficou

http://luansdesigner.meximas.com/index.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

jgustavo99    85

jgustavo99
Postado

Então é so você, dar um width:100%.

 

Exemplo:

body {
 width:100%;
 background: url(suaimagem) no-repeat;
}

Espero ter Ajudado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaíque Luan    0

Kaíque Luan
Postado

Então é so você, dar um width:100%.

 

Exemplo:

body {
 width:100%;
 background: url(suaimagem) no-repeat;
}

Espero ter Ajudado!

 

 

 

 

 

 

Agradeço mais não deu...

 

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaíque Luan    0

Kaíque Luan
Postado

 

body{

background-image: url(bg1.png);
background-repeat: no-repeat;
width:100%;
height:100%;
}
.logo{
position:absolute;
width:60px;
height:45px;
}
.logo:hover {
position:absolute;
width:70px;
height:55px;
}
.servicos{
position:absolute;
width:480px;
height:360px;
left:50%;
top:50%;
;
margin-top:-180px;
}

 

 

<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Luan's Designer" />
<head><title>Luans'Designer</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<a href="https://www.facebook.com/kaique.luan.7583" > <img src="facebook.png" class="logo"></img> </a>
<img src="servicos.png" class="servicos"></img>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado 




body {



    background: url("imagem.jpg") no-repeat center center fixed;



    background-size: cover;



    -webkit-background-size: cover; /* SAFARI / CHROME */



       -moz-background-size: cover; /* FIREFOX */



        -ms-background-size: cover; /* IE */



         -o-background-size: cover; /* OPERA */



}







			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Kaíque Luan
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Kaíque Luan
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			



 


 

body {
background-image: url(SUAIMAGEM);


background-size: 100% 100%;


 


 


}


Tenta assim!




 




 


 

body {
background: url("imagem.jpg") no-repeat center center fixed;


background-size: cover;


-webkit-background-size: cover; /* SAFARI / CHROME */


-moz-background-size: cover; /* FIREFOX */


-ms-background-size: cover; /* IE */


-o-background-size: cover; /* OPERA */


}


 




 


 


Os dos modos funcionaram muito obrigado a todos que ajudarão.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
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