[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$f5Zr2mfl-q86T5ga5OA-MBWoS7m2ZpVL9-NyJBM3ZCY0":22,"footer-db":60,"$foYZJswKgDXq-uJEIqAW4cu3UGxTFNXhD06MQmNbSAG8":80,"megamenu":95,"header-db":162,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":173},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":33,"psVersions":34,"content":38,"faq":39,"tldr":55,"readingTime":56,"generatedAt":57,"publishDate":57,"relatedArticles":58,"sourceCategory":59},"Personnaliser le fond du bloc éditorial PrestaShop (CSS complet)","personnaliser-fond-bloc-editorial-prestashop-css","Apprenez à modifier l'arrière-plan du bloc éditorial PrestaShop : image de fond pleine largeur, suppression des marges et bonnes pratiques CSS responsive.","design",[28,29,30,31,32],"bloc éditorial","CSS","background image","mise en page","personnalisation thème","debutant",[35,36,37],"1.6","1.7","8.x","\u003Ch1>Personnaliser le fond du bloc éditorial PrestaShop\u003C\u002Fh1>\n\u003Ch2>Le problème : un bloc éditorial limité par les marges du conteneur\u003C\u002Fh2>\n\u003Cp>Le bloc éditorial de PrestaShop est un module simple mais très utilisé pour afficher du contenu personnalisé sur la page d'accueil. Un besoin fréquent consiste à lui attribuer une image de fond qui occupe toute la largeur de l'écran — un rendu visuel impactant, mais que la structure HTML par défaut empêche.\u003C\u002Fp>\n\u003Cp>Le problème vient de l'imbrication du bloc dans un conteneur \u003Ccode>.container\u003C\u002Fcode> qui applique des marges latérales automatiques et des paddings de 15 pixels de chaque côté. Résultat : l'image de fond ne peut jamais atteindre les bords de l'écran.\u003C\u002Fp>\n\u003Ch2>Comprendre la structure HTML du bloc éditorial\u003C\u002Fh2>\n\u003Cp>Dans les thèmes PrestaShop basés sur Bootstrap (à partir de la version 1.6), la mise en page repose sur un système de grille. Le bloc éditorial est rendu à l'intérieur d'une hiérarchie de \u003Ccode>div\u003C\u002Fcode> qui ressemble à ceci :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<div class=\"container\">\n  <div class=\"row\">\n    <div id=\"htmlcontent_home\" class=\"col-xs-12\">\n      <!-- Contenu du bloc éditorial -->\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>La classe \u003Ccode>.container\u003C\u002Fcode> dans le fichier \u003Ccode>global.css\u003C\u002Fcode> applique ces propriétés :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.container {\n  margin-right: auto;\n  margin-left: auto;\n  padding-left: 15px;\n  padding-right: 15px;\n  max-width: 1170px; \u002F* variable selon le thème *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ce sont ces règles qui empêchent le bloc d'occuper toute la largeur du viewport.\u003C\u002Fp>\n\u003Ch2>Solution 1 : Ajouter une image de fond via CSS (méthode simple)\u003C\u002Fh2>\n\u003Cp>La manière la plus propre d'ajouter un arrière-plan au bloc éditorial est d'utiliser la propriété CSS \u003Ccode>background-image\u003C\u002Fcode> sur le conteneur du module :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n#htmlcontent_home {\n  background-image: url('\u002Fimg\u002Fcms\u002Fmon-image-de-fond.jpg');\n  background-size: cover;\n  background-position: center center;\n  background-repeat: no-repeat;\n  padding: 60px 30px;\n  min-height: 400px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Détail des propriétés utilisées\u003C\u002Fh3>\n\u003Ctr>\u003Cth>Propriété\u003C\u002Fth>\u003Cth>Rôle\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`background-size: cover`\u003C\u002Fth>\u003Cth>L'image couvre tout le conteneur sans déformation\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`background-position: center`\u003C\u002Fth>\u003Cth>L'image reste centrée quel que soit le recadrage\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`background-repeat: no-repeat`\u003C\u002Fth>\u003Cth>Évite la répétition en mosaïque\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`min-height`\u003C\u002Fth>\u003Cth>Garantit une hauteur minimale même si le contenu est court\u003C\u002Fth>\u003C\u002Ftr>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Remarque :\u003C\u002Fstrong> Utilisez toujours un chemin relatif commençant par \u003Ccode>\u002Fimg\u002Fcms\u002F\u003C\u002Fcode> pour les images uploadées via le back-office PrestaShop. Évitez les URL absolues en dur qui casseront lors d'un changement de domaine ou d'un passage en HTTPS.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>Solution 2 : Image de fond pleine largeur (full-width)\u003C\u002Fh2>\n\u003Cp>Pour que l'image de fond dépasse les limites du \u003Ccode>.container\u003C\u002Fcode> et couvre toute la largeur de l'écran, deux approches sont possibles.\u003C\u002Fp>\n\u003Ch3>Approche A : Surcharger les marges du conteneur (ciblée)\u003C\u002Fh3>\n\u003Cp>Plutôt que de modifier la classe \u003Ccode>.container\u003C\u002Fcode> globalement (ce qui casserait toute la mise en page), ciblez uniquement la section du bloc éditorial :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n#htmlcontent_home {\n  background-image: url('\u002Fimg\u002Fcms\u002Fbanniere-large.jpg');\n  background-size: cover;\n  background-position: center;\n  margin-left: calc(-50vw + 50%);\n  margin-right: calc(-50vw + 50%);\n  padding-left: calc(50vw - 50%);\n  padding-right: calc(50vw - 50%);\n  width: 100vw;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette technique utilise les unités \u003Ccode>vw\u003C\u002Fcode> (viewport width) et la fonction \u003Ccode>calc()\u003C\u002Fcode> pour sortir le bloc de son conteneur tout en préservant l'alignement du contenu texte à l'intérieur.\u003C\u002Fp>\n\u003Ch3>Approche B : Déplacer le bloc hors du conteneur (template)\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 1.7 et 8.x, la solution la plus propre consiste à modifier le template du thème pour déplacer le hook \u003Ccode>displayHome\u003C\u002Fcode> en dehors du \u003Ccode>.container\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* Dans templates\u002Flayouts\u002Flayout-both-columns.tpl ou équivalent *}\n\n{block name='content_wrapper'}\n  {* Hook hors conteneur pour le pleine largeur *}\n  {hook h='displayHomeFullWidth'}\n\n  <div class=\"container\">\n    {* Le reste du contenu reste dans le conteneur *}\n    {block name='content'}{\u002Fblock}\n  <\u002Fdiv>\n{\u002Fblock}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Puis dans le back-office, greffez le module sur ce nouveau hook \u003Ccode>displayHomeFullWidth\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Solution 3 : Image de fond avec overlay de texte lisible\u003C\u002Fh2>\n\u003Cp>Un piège fréquent est d'ajouter une image de fond sans garantir la lisibilité du texte par-dessus. Voici une solution complète :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n#htmlcontent_home {\n  position: relative;\n  background-image: url('\u002Fimg\u002Fcms\u002Fbanniere.jpg');\n  background-size: cover;\n  background-position: center;\n  color: #ffffff;\n}\n\n#htmlcontent_home::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 1;\n}\n\n#htmlcontent_home > * {\n  position: relative;\n  z-index: 2;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le pseudo-élément \u003Ccode>::before\u003C\u002Fcode> crée un voile semi-transparent par-dessus l'image, ce qui garantit le contraste du texte quelle que soit la luminosité de la photo.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques pour les images de fond\u003C\u002Fh2>\n\u003Ch3>Optimisation des performances\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Format :** Privilégiez le WebP (supporté par tous les navigateurs modernes) avec un fallback JPEG\u003C\u002Fli>\n\u003Cli>**Dimensions :** Pour un fond pleine largeur, 1920×800 pixels est un bon compromis\u003C\u002Fli>\n\u003Cli>**Poids :** Visez moins de 200 Ko après compression (utilisez TinyPNG ou Squoosh)\u003C\u002Fli>\n\u003Cli>**Lazy loading :** Les images de fond CSS ne sont pas affectées par `loading=\"lazy\"`, mais elles ne sont chargées que si l'élément est rendu\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Responsive design\u003C\u002Fh3>\n\u003Cp>Adaptez l'image de fond aux écrans mobiles :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n@media (max-width: 768px) {\n  #htmlcontent_home {\n    background-image: url('\u002Fimg\u002Fcms\u002Fbanniere-mobile.jpg');\n    min-height: 250px;\n    padding: 30px 15px;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Servir une image plus légère sur mobile améliore les performances et le score Core Web Vitals (LCP en particulier).\u003C\u002Fp>\n\u003Ch2>Où ajouter le CSS personnalisé\u003C\u002Fh2>\n\u003Cp>Selon votre version de PrestaShop :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Version\u003C\u002Fth>\u003Cth>Fichier recommandé\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>PrestaShop 1.6\u003C\u002Fth>\u003Cth>`themes\u002Fvotre-theme\u002Fcss\u002Fglobal.css`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>PrestaShop 1.7\u003C\u002Fth>\u003Cth>`themes\u002Fvotre-theme\u002Fassets\u002Fcss\u002Fcustom.css`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>PrestaShop 8.x\u003C\u002Fth>\u003Cth>`themes\u002Fvotre-theme\u002Fassets\u002Fcss\u002Fcustom.css` ou via un module de CSS personnalisé\u003C\u002Fth>\u003C\u002Ftr>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Important :\u003C\u002Fstrong> Ne modifiez jamais le fichier \u003Ccode>theme.css\u003C\u002Fcode> compilé directement. Si votre thème utilise Webpack ou un préprocesseur (SASS\u002FLESS), ajoutez vos styles dans le fichier source approprié puis recompilez.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>L'outil indispensable : l'inspecteur du navigateur\u003C\u002Fh2>\n\u003Cp>Pour identifier précisément quel sélecteur CSS cibler sur votre propre thème :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Ouvrez votre boutique dans Firefox ou Chrome\u003C\u002Fli>\n\u003Cli>Faites un **clic droit** sur le bloc éditorial → **Inspecter l'élément**\u003C\u002Fli>\n\u003Cli>Repérez l'identifiant (`id`) ou les classes CSS du bloc\u003C\u002Fli>\n\u003Cli>Testez vos modifications CSS en direct dans l'onglet **Styles**\u003C\u002Fli>\n\u003Cli>Une fois satisfait, reportez le CSS dans votre fichier de thème\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Cette méthode vous permet de voir en temps réel l'effet de chaque propriété CSS sans risquer de casser votre boutique en production.\u003C\u002Fp>",[40,43,46,49,52],{"q":41,"a":42},"Comment mettre une image de fond sur le bloc éditorial PrestaShop sans modifier le template ?","Utilisez la propriété CSS `background-image` sur le sélecteur `#htmlcontent_home` dans votre fichier CSS personnalisé. Ajoutez `background-size: cover` et `background-position: center` pour un rendu optimal. Cette méthode fonctionne sur toutes les versions de PrestaShop sans toucher aux fichiers PHP ou TPL.",{"q":44,"a":45},"Pourquoi mon image de fond ne couvre pas toute la largeur de l'écran sur PrestaShop ?","Le bloc éditorial est imbriqué dans un conteneur `.container` qui impose une largeur maximale et des marges latérales de 15 pixels. Pour obtenir un fond pleine largeur, utilisez la technique CSS `margin-left: calc(-50vw + 50%)` combinée à `width: 100vw`, ou déplacez le module hors du conteneur en modifiant le template du thème.",{"q":47,"a":48},"Comment rendre le texte lisible sur une image de fond dans PrestaShop ?","Ajoutez un overlay semi-transparent via le pseudo-élément CSS `::before` avec un `background: rgba(0, 0, 0, 0.45)`. Cela crée un voile sombre entre l'image et le texte, garantissant un contraste suffisant pour la lisibilité et l'accessibilité, quelle que soit la luminosité de la photo.",{"q":50,"a":51},"Quelle taille d'image utiliser pour un fond de bloc éditorial PrestaShop ?","Pour un arrière-plan pleine largeur, utilisez une image de 1920×800 pixels en format WebP ou JPEG compressé, avec un poids inférieur à 200 Ko. Prévoyez une version mobile plus légère (768×400 pixels) chargée via une media query CSS pour optimiser les performances sur smartphone.",{"q":53,"a":54},"Faut-il modifier la classe .container pour élargir le bloc éditorial PrestaShop ?","Non, ne modifiez jamais la classe `.container` globale : cela affecterait la mise en page de toutes les sections du site. Ciblez uniquement le bloc éditorial avec son identifiant CSS spécifique (`#htmlcontent_home`) et utilisez des techniques comme `calc()` avec les unités `vw` pour dépasser les limites du conteneur de manière isolée.","Pour ajouter une image de fond au bloc éditorial PrestaShop, utilisez `background-image` en CSS sur `#htmlcontent_home`. Pour un rendu pleine largeur, dépassez le conteneur Bootstrap avec `calc(-50vw + 50%)` ou déplacez le hook hors du `.container` dans le template.",5,"2026-03-21T16:27:57.000Z",[],"PrestaShop pour les développeurs",{"footer":61},{"theme":62,"description":63,"hours":63,"logo":64,"contact":68,"social":69,"bottomBar":79},"dark",null,{"src":65,"href":66,"alt":67},"\u002Flogo-ac.svg","\u002F","Alexandre Carette",{"email":63,"phone":63,"address":63,"cta":63},[70,73,76],{"platform":71,"href":72,"label":71},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":74,"href":75,"label":74},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":77,"href":78,"label":77},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":63},{"academy":81,"blog":82,"expertise":94},[],[83,88,91],{"title":84,"url":85,"score":86,"type":87},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back",1,"blog",{"title":89,"url":90,"score":86,"type":87},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":92,"url":93,"score":86,"type":87},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"items":96},[97,107,114,122,130,139,146,154],{"id":98,"type":99,"label":100,"href":102,"icon":63,"description":63,"badge":63,"groupTitle":63,"style":63,"gridColumns":63,"cssClass":63,"psCategoryId":63,"showPsChildren":103,"position":104,"children":105,"psChildren":106},41,"link",{"fr":101},"Expertise","\u002Fexpertise",false,0,[],[],{"id":108,"type":99,"label":109,"href":111,"icon":63,"description":63,"badge":63,"groupTitle":63,"style":63,"gridColumns":63,"cssClass":63,"psCategoryId":63,"showPsChildren":103,"position":86,"children":112,"psChildren":113},42,{"fr":110},"Blog","\u002Fblog",[],[],{"id":115,"type":99,"label":116,"href":118,"icon":63,"description":63,"badge":63,"groupTitle":63,"style":63,"gridColumns":63,"cssClass":63,"psCategoryId":63,"showPsChildren":103,"position":119,"children":120,"psChildren":121},43,{"fr":117},"Modules PrestaShop","\u002Fmodules",2,[],[],{"id":123,"type":99,"label":124,"href":126,"icon":63,"description":63,"badge":63,"groupTitle":63,"style":63,"gridColumns":63,"cssClass":63,"psCategoryId":63,"showPsChildren":103,"position":127,"children":128,"psChildren":129},44,{"fr":125},"Outils IA","\u002Foutils-ia",3,[],[],{"id":131,"type":99,"label":132,"href":134,"icon":63,"description":63,"badge":63,"groupTitle":63,"style":135,"gridColumns":63,"cssClass":63,"psCategoryId":63,"showPsChildren":103,"position":136,"children":137,"psChildren":138},45,{"fr":133},"Offre Starter ✨","\u002Foffre-starter",{"highlight":20},4,[],[],{"id":140,"type":99,"label":141,"href":143,"icon":63,"description":63,"badge":63,"groupTitle":63,"style":63,"gridColumns":63,"cssClass":63,"psCategoryId":63,"showPsChildren":103,"position":56,"children":144,"psChildren":145},46,{"fr":142},"Academy","\u002Facademy",[],[],{"id":147,"type":99,"label":148,"href":150,"icon":63,"description":63,"badge":63,"groupTitle":63,"style":63,"gridColumns":63,"cssClass":63,"psCategoryId":63,"showPsChildren":103,"position":151,"children":152,"psChildren":153},47,{"fr":149},"À propos","\u002Fa-propos",6,[],[],{"id":155,"type":99,"label":156,"href":158,"icon":63,"description":63,"badge":63,"groupTitle":63,"style":63,"gridColumns":63,"cssClass":63,"psCategoryId":63,"showPsChildren":103,"position":159,"children":160,"psChildren":161},48,{"fr":157},"Contact","\u002Fcontact",7,[],[],{"header":163},{"logo":164,"topBar":167,"contactEmail":170,"features":171,"navBar":63},{"src":65,"alt":165,"text":67,"href":66,"class":166},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":63,"showLanguages":103,"align":168,"languages":169},"left",[],"contact@alexandrecarette.fr",{"showSearch":103,"showWishlist":103,"showLogin":20,"showContact":103,"showCart":103,"stickyHeader":20,"headerLayout":172},"inline",{"columns":174},[175,187,217,233],{"title":176,"links":177},"Plateforme",[178,180,183,184],{"label":179,"href":134,"external":103},"Offre Starter (2 500 €)",{"label":181,"href":182,"external":103},"Devenir Ambassadeur","\u002Fambassadeur",{"label":117,"href":118,"external":103},{"label":185,"href":186,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":188,"links":189},"Le Synedre",[190,193,196,199,202,205,208,211,214],{"label":191,"href":192,"external":103},"L'histoire","\u002Fsynedre",{"label":194,"href":195,"external":103},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":197,"href":198,"external":103},"L'équipe","\u002Fequipe",{"label":200,"href":201,"external":103},"Le réacteur en direct","\u002Freacteur",{"label":203,"href":204,"external":103},"Le Drill (entraînement)","\u002Fdrill",{"label":206,"href":207,"external":103},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":209,"href":210,"external":103},"Les agents IA","\u002Fagents-ia",{"label":212,"href":213,"external":103},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":215,"href":216,"external":103},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":218,"links":219},"Ressources",[220,221,222,225,227,230],{"label":110,"href":111,"external":103},{"label":142,"href":143,"external":103},{"label":223,"href":224,"external":103},"Dictionnaire","\u002Fdictionnaire",{"label":226,"href":102,"external":103},"Expertise PrestaShop",{"label":228,"href":229,"external":103},"Flywheel","\u002Fflywheel",{"label":231,"href":232,"external":103},"Manifeste","\u002Fmanifeste",{"title":149,"links":234},[235,236,239],{"label":67,"href":150,"external":103},{"label":237,"href":238,"external":103},"Dossier de presse","\u002Fpresse",{"label":157,"href":158,"external":103}]