Modifier l’image de fond du thème Prestashop
Modification du fond de thème
Cet article est dédié à la modification de l’image de fond d’un thème Prestashop. Simple et rapide, cette modification vous permet d’habiller votre boutique au mode du moment. (ex:Noël, st Valentin, ect…)
Voici les étapes à suivre:
- Créez votre image via Photoshop ou autres (1500 x 780 px) et enregistrez la
- Transférez la via Ftp (ex: FileZilla) dans : Prestshop -> themes -> votre thème -> img
- Accédez à votre Global.CSS : Prestshop -> themes -> votre thème -> CSS -> Global.css
- Ouvrez le via le blocnotes, Notepad et autres éditeur
- Puis, vers le début du code, vous allez voir « body ». (ligne 17)
- Remplacez les quelques lignes de Code par :
body {
background: #000000 url(../img/le nom de votre image.gif ou jpg) repeat-x fixed top center; <- fixe ou non
font-size: 11px;
font-family: « Trebuchet MS », Arial, Sans-Serif;
color: #333333;
text-align:center;
}
- Maintenant, il va falloir ajouter des background dans #page (ligne 183)
- Remplacez ça:
#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
}
par:
#page {
width: 980px;margin: 2px auto 2px auto;
text-align:left;
background-color: #ffffff; (code couleur de la page)
background-repeat: no-repeat;
background-position: top;
}
- Enregistrez tout ça, et Hop c’est joué !
J’espère que cette manipulation étoffera votre boutique et répondra à vos attentes 
13 réponses à to “Modifier l’image de fond du thème Prestashop”
Laisser un commentaire
Bonjour,
Je voulais vous remercier pour votre site, je viens enfin d’arriver à faire ce que je souhaitais, et toute seule comme une grande!!
Merci beaucoup
Élise
Pour mettre un motif de fond, c’est presque pareil…
Il faut d’abord un petit motif (130x130px) nommé ici fond.jpg et que l’on répètera comme un papier peint.
On suit exactement ce qui est indiqué dans l’article, il y a juste la ligne de code qui change dans « body »:
body {
background: #000000 url(../img/fond.jpg) repeat scroll 0 0;
font-size: 11px;
font-family: « Trebuchet MS », Arial, Sans-Serif;
color: #333333;
text-align:center;
}
On modifie la page (pareil)):
#page {
width: 980px;
margin: 2px auto 2px auto;
text-align:left;
background-color: #ffffff; (code couleur de la page)
background-repeat: repeat;
background-position: top;
}
Et normalement le tour est joué!
Et merci pour votre aide…
Élise
PowerBlonde
Bonjour,
merci pour le fond c’est vraiment super… par contre tout les logos avec liens prestashop « devises, contact, plan du site, favoris sont passé en dessous de ma banière et surtout le panier et le compte, a l’origine en haut à droite sont aussi décallés en dessous.
Il y a moyen de remettre au moins le panier et le compte sur le coté droit en haut ?
Merci
bonjour merci pour ce tuto
j’aimerai bien savoir si possible de faire défilé plusieurs images
Merci d’avance
Bonjour, merci pour le tuto
En revanche je rencontre le même souci que Demoineret 
Ca ne marche pas !!! prestashop 1.4 ?
j’ai suivi toutes les étapes mais ça n’a pas marché pour moi , le thème est le même je vois pas mon image.
j’utilise prestashop 1.4.0.17
Merci
Merci ,nous l’avons fait pour un site
a+
Bonjour,
Désolé de casser l’ambiance mais je pense qu’il y a des failles dans cette combine. Je suis conscient cependant qu’il n’existe pas de solution miracle ni parfaite, mais tout de même en cas ou le visiteur à une grande résolution sur son écran ça risque de faire bizarre. Le site lui, va s’adapter à la résolution normalement, tandis que l’image de fond elle ne va pas le faire puisqu’elle est fixe en ce qui est de ses proportions.
De plus une grande image comme ça va alourdir considérablement le temps de chargement du site non ?
Désolé de ne pas apporter de meilleure solution pour le moment mais promis si je trouve mieux je viendrais vous le dire.
Cordialement,
Besky
Besky, tu as presque raison :
Si tu prends une très grande image (1900 en largeur), le centrage va se faire pile au milieu, donc à toi de faire en sorte que le milieu de ton visuel soit celui que tu veux voir apparaître sur les écrans de tes clients.
Concernant la lourdeur du fichier, tu peux baisser la qualité pour obtenir un petit 400ko tout à fait net visuellement.
Je parle en connaissance de cause, je l’ai fait et on ne voit aucune différence entre le fichier en qualité 100% et le fichier en qualité 95% (400ko).
Bon courage
Bonjour,
J’ai fini par adapter en partie ce tutoriel pour Noël sur mon presta.
Dites moi ce que vous en pensez svp (cliquez sur mon pseudo pour voir le site)
Merci !
Bonjour tout le monde j’ai suivi le tuto point par point, mais
rien n’à changer pare
que mon fond et devenu blanc.
PrestaShop version 1.4.4.1
Merci d’avance
Stéphane
Bonjour à tous,
Besky,j’aime beaucoup le thème que tu as choisi!! Je suis en plein lancement de mon site et j’essaye de créer un thème mais je ne suis vraiment pas douée en informatique… Avec du travail et qques explications ça viendra…
A tous, pouvez-vous me dire comment faire pour trouver ce chemin svp:
« Accédez à votre Global.CSS : Prestshop -> themes -> votre thème -> CSS -> Global.css »
Merci beaucoup.