Personnaliser le fond du bloc éditorial PrestaShop

Le problème : un bloc éditorial limité par les marges du conteneur

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.

Le problème vient de l'imbrication du bloc dans un conteneur .container 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.

Comprendre la structure HTML du bloc éditorial

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 div qui ressemble à ceci :

<div class="container">
  <div class="row">
    <div id="htmlcontent_home" class="col-xs-12">
      <!-- Contenu du bloc éditorial -->
    </div>
  </div>
</div>

La classe .container dans le fichier global.css applique ces propriétés :

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 1170px; /* variable selon le thème */
}

Ce sont ces règles qui empêchent le bloc d'occuper toute la largeur du viewport.

Solution 1 : Ajouter une image de fond via CSS (méthode simple)

La manière la plus propre d'ajouter un arrière-plan au bloc éditorial est d'utiliser la propriété CSS background-image sur le conteneur du module :

#htmlcontent_home {
  background-image: url('/img/cms/mon-image-de-fond.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 60px 30px;
  min-height: 400px;
}

Détail des propriétés utilisées

PropriétéRôle `background-size: cover`L'image couvre tout le conteneur sans déformation `background-position: center`L'image reste centrée quel que soit le recadrage `background-repeat: no-repeat`Évite la répétition en mosaïque `min-height`Garantit une hauteur minimale même si le contenu est court

Remarque : Utilisez toujours un chemin relatif commençant par /img/cms/ 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.

Solution 2 : Image de fond pleine largeur (full-width)

Pour que l'image de fond dépasse les limites du .container et couvre toute la largeur de l'écran, deux approches sont possibles.

Approche A : Surcharger les marges du conteneur (ciblée)

Plutôt que de modifier la classe .container globalement (ce qui casserait toute la mise en page), ciblez uniquement la section du bloc éditorial :

#htmlcontent_home {
  background-image: url('/img/cms/banniere-large.jpg');
  background-size: cover;
  background-position: center;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  width: 100vw;
}

Cette technique utilise les unités vw (viewport width) et la fonction calc() pour sortir le bloc de son conteneur tout en préservant l'alignement du contenu texte à l'intérieur.

Approche B : Déplacer le bloc hors du conteneur (template)

Sur PrestaShop 1.7 et 8.x, la solution la plus propre consiste à modifier le template du thème pour déplacer le hook displayHome en dehors du .container :

{* Dans templates/layouts/layout-both-columns.tpl ou équivalent *}

{block name='content_wrapper'}
  {* Hook hors conteneur pour le pleine largeur *}
  {hook h='displayHomeFullWidth'}

  <div class="container">
    {* Le reste du contenu reste dans le conteneur *}
    {block name='content'}{/block}
  </div>
{/block}

Puis dans le back-office, greffez le module sur ce nouveau hook displayHomeFullWidth.

Solution 3 : Image de fond avec overlay de texte lisible

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 :

#htmlcontent_home {
  position: relative;
  background-image: url('/img/cms/banniere.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

#htmlcontent_home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

#htmlcontent_home > * {
  position: relative;
  z-index: 2;
}

Le pseudo-élément ::before 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.

Bonnes pratiques pour les images de fond

Optimisation des performances

• **Format :** Privilégiez le WebP (supporté par tous les navigateurs modernes) avec un fallback JPEG
• **Dimensions :** Pour un fond pleine largeur, 1920×800 pixels est un bon compromis
• **Poids :** Visez moins de 200 Ko après compression (utilisez TinyPNG ou Squoosh)
• **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

Responsive design

Adaptez l'image de fond aux écrans mobiles :

@media (max-width: 768px) {
  #htmlcontent_home {
    background-image: url('/img/cms/banniere-mobile.jpg');
    min-height: 250px;
    padding: 30px 15px;
  }
}

Servir une image plus légère sur mobile améliore les performances et le score Core Web Vitals (LCP en particulier).

Où ajouter le CSS personnalisé

Selon votre version de PrestaShop :

VersionFichier recommandé PrestaShop 1.6`themes/votre-theme/css/global.css` PrestaShop 1.7`themes/votre-theme/assets/css/custom.css` PrestaShop 8.x`themes/votre-theme/assets/css/custom.css` ou via un module de CSS personnalisé

Important : Ne modifiez jamais le fichier theme.css compilé directement. Si votre thème utilise Webpack ou un préprocesseur (SASS/LESS), ajoutez vos styles dans le fichier source approprié puis recompilez.

L'outil indispensable : l'inspecteur du navigateur

Pour identifier précisément quel sélecteur CSS cibler sur votre propre thème :

1. Ouvrez votre boutique dans Firefox ou Chrome
2. Faites un **clic droit** sur le bloc éditorial → **Inspecter l'élément**
3. Repérez l'identifiant (`id`) ou les classes CSS du bloc
4. Testez vos modifications CSS en direct dans l'onglet **Styles**
5. Une fois satisfait, reportez le CSS dans votre fichier de thème

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.