Jump to content

Ajustement automatique du background en fonction du navigateur

koretex

By koretex
in Modules et thèmes gratuits

 Share

Recommended Posts

koretex Newbie

koretex

Posted
Posted

Bonjour à tous,


J'ai fais quelques recherches sur le net et sur le forum, mais je n'ai pas trouvé la réponse.

Alors voila, je suis entrain de créer un thème pour prestashop.
Seulement je voudrais que l'image d'arrière plan du site s'ajuste automatiquement en fonction de la taille du navigateur.
Je sais qu'en HTML/CSS cela n'est pas faisable.

Je suis donc tomber sur un script JS permettant de faire cela à l'adresse suivante :
http://webbricks.org/bricks/bgMax/

Mais mon problème c'est que je ne sais pas comment l'intègrer à mon site :-/
Ayant quelques notions de XHTML, j'ai farfouillé un peu dans toute les pages(du theme ou du site) mais je ne voit rien qui me soit familié :(

Quelqu'un pourrait-il me donner un petit coup de main ? ^^

Merci d'avance ;)

Link to comment
Share on other sites
  • 2 weeks later...
Vincent Decaux Newbie

Vincent Decaux

Posted
Posted

Hmm, peut être revoir tes notions de XHTML par des tutos sur le site du Zéro ou Alsacréation.
Car les fichiers template (contenus dans le dossier du thème installé, par exemple header.tpl) ressemblent fortement à du HTML classique.

D'ailleurs, il faudra jouer sur header.tpl, et copier / coller le code.

Link to comment
Share on other sites
  • 4 months later...
aurelweb Newbie

aurelweb

Posted
Posted

Bonjour,

J'ai modifier le header.tpl pour afficher mon image en plein écran mais l'image ne s'affiche pas je ne comprends pas et je suis bloquer...

Pourtant j'ai fait exactement ce que dit le site internet de bgmax en mettant comme il faut le lien de l'image etc...

Est-ce que c'est déjà arriver à quelqu'un ? Si oui comment à t'il fait ?

Cordialement

Link to comment
Share on other sites
zolt Newbie

zolt

Posted
Posted

Bonjour

Pour moi j'ai fais de cette façon:
Dans ton thème tu ajoute ton image dans le dossier img.
Et ensuite, regarde mon code.
J'ai ajouté ce code dans le fichier:
\themes\prestashop\css\global.css

body {
   background-attachment: fixed;
   background-color: white;
   background-image: url("../img/ton_image.jpg");
   background-position: center top;
   background-repeat: no-repeat;
   color: #5D717E;
   font-family: Verdana,Arial,Helvetica,Sans-Serif;
   font-size: 11px;
   text-align: center;
}


@++

Link to comment
Share on other sites
aurelweb Newbie

aurelweb

Posted
Posted

Bonjour,

Ce code ne marche pas pour ce que je veux faire.

Je veux que mon image de fond s'adapte en fonction de la configuration d'écran de chaque ordinateur qui visitera le site internet.
En gros il faut que l'image prenne la taille complète de l'écran qu'elle s'ajuste automatiquement.
En html simple j'utilise bgMax mais sous Prestashop je n'arrive pas à le faire marcher car un page basique html est couper en plusieurs fichier .tpl (ce qui correspond a du php)

Cordialement

Link to comment
Share on other sites
Maury Girard Newbie

Maury Girard

Posted
Posted

bonjour Aurelweb
Il y a 2 solutions possibles.

La première est :
D’utiliser uniquement le CSS en définissant une image de fond d’une grand résolution (1920px de large), puis de la mettre en background du <body> et la positionner au milieu.

Exemple comme sur ce site Ici

La seconde est :
De créer une image dans le header.tpl par exemple,
et lui attribuer comme propriétés dans le Css :

img#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}



En mettant un height:100% dans <body> aussi.
Ou ceci est possible en CSS3 avec background-size:100%, mais incompatible IE8 du coup.

Link to comment
Share on other sites
aurelweb Newbie

aurelweb

Posted
Posted

Bonjour Maury Girard,

Je ne comprends pas très bien ce que vous entendez par :

De créer une image dans le header.tpl

Ce que j'ai fait son mon site c'est la première solution qui consiste à mettre une résolution d'image en 1500x975 mais le soucis c'est qu'on ne voit pas le bas de l'image alors que celui-ci est primordiale donc il faut réellement que l'image s'adapte en fonction de la résolution d'écran de chaque ordinateur visitant le site internet.

La solution numéro 2 à l'air de pouvoir fonctionner mais je n'arrive pas à le mettre en place. Pourriez-vous me dire comment dois-je créer une image dans le header.tpl.

Cordialement

Link to comment
Share on other sites
aurelweb Newbie

aurelweb

Posted
Posted

Aucune image ne s'affiche ...

Dans le css j'ai mis : 

img#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}



Dans le fichier header.tpl (placer juste après la balise <body> :







Je ne vois vraiment pas pourquoi ça ne marche pas ...



			
		


		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					






	

	

	

		

			

				


	
		hightone69
	

				
				
					
						
Newbie
					
				
			

		

		

			

				


hightone69
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

Salut essaye ça pour voir ce que ça donne !



background-image: url(../img/ton image); 
background-repeat: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 







			
		


		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		aurelweb
	

				
				
					
						
Newbie
					
				
			

		

		

			

				


aurelweb
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			
Bonjour,

Ton code marche niquel ça prend en compte la résolution d'écran par contre il me manque un peu du bas de l'image.
Sinon le code apparement ne marche pas sous IE8 as-tu une solution pour palier à ce problème ?

Cordialement


			
		


		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				
			
			



		

	


	
	
	
	
	
		
	

			
				
				



	
	
		

			
				
Create an account or sign in to comment

				
You need to be a member in order to leave a comment

			
	
			

				

					

						
Create an account

						
Sign up for a new account in our community. It's easy!

						
							
						
						Register a new account
					

					

						
Sign in

						
Already have an account? Sign in here.

						Sign In Now
					

				

			

		

	


			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
					


				
			

		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •