Adapter la taille d'une bannière PrestaShop au-delà des limites du thème

Le problème : une bannière qui déborde du thème

Vous avez créé une bannière promotionnelle aux dimensions exactes souhaitées, mais une fois uploadée dans PrestaShop, elle dépasse du conteneur prévu par le thème. L'image déborde horizontalement, casse la mise en page ou affiche des barres de défilement indésirables.

Ce problème est extrêmement courant et provient d'un décalage entre les dimensions de votre image et les contraintes CSS définies par le thème. La bonne nouvelle : la solution est purement CSS et ne nécessite aucune modification PHP.

Comprendre l'architecture du module bannière

PrestaShop 1.6 — Module `blockbanner`

Sur PrestaShop 1.6, le module blockbanner gère l'affichage de la bannière dans le header. La structure HTML générée ressemble à ceci :

<div id="header">
  <div class="banner">
    <a href="#">
      <img src="/modules/blockbanner/img/sale70.png" alt="Banner" />
    </a>
  </div>
</div>

Le CSS du module se trouve dans /modules/blockbanner/blockbanner.css, et les styles globaux du thème dans /themes/votre-theme/css/global.css.

PrestaShop 1.7 et 8.x — Module `ps_banner`

À partir de la version 1.7, le module a été renommé ps_banner. La structure HTML a évolué avec l'adoption de Bootstrap 4, puis du système de hooks modernisé en 8.x :

<div id="banners">
  <div class="banner">
    <a href="#">
      <img src="/modules/ps_banner/img/banner-img.jpg" 
           class="img-fluid" alt="Banner" />
    </a>
  </div>
</div>

La classe img-fluid de Bootstrap applique déjà max-width: 100% et height: auto, ce qui limite les débordements. Cependant, des conflits CSS restent possibles si votre image est significativement plus large que le conteneur.

Solution CSS pour contenir la bannière

Approche recommandée : CSS responsive moderne

Plutôt que de forcer des dimensions fixes, privilégiez une approche responsive qui s'adapte à tous les écrans :

/* Fichier : modules/blockbanner/blockbanner.css (PS 1.6)
   ou votre fichier custom.css */

.banner img {
  display: block;
  width: 100%;
  max-width: 1170px;
  height: auto;
  margin: 0 auto;
}

Cette règle assure que :

• L'image occupe toute la largeur disponible (`width: 100%`)
• Elle ne dépasse jamais la largeur maximale du conteneur Bootstrap (`max-width: 1170px`)
• Le ratio est préservé automatiquement (`height: auto`)
• L'image est centrée horizontalement (`margin: 0 auto`)

Supprimer la hauteur maximale du conteneur

Si le thème impose une hauteur fixe au conteneur .banner, votre image sera tronquée. Corrigez cela :

/* Fichier : themes/votre-theme/css/global.css
   ou custom.css en surcharge */

header .banner {
  background: #ffffff;
  max-height: none; /* Supprime la limitation de hauteur */
  overflow: visible;
}

Solution spécifique pour centrer une bannière plus petite que le conteneur

Si votre bannière fait par exemple 70% de la largeur du conteneur et que vous souhaitez la centrer :

.banner a img {
  display: block;
  width: 70%;
  height: auto;
  max-width: 1170px;
  margin: 0 auto; /* Centrage propre via marges automatiques */
}

Évitez le positionnement avec position: relative et left: 15% pour centrer un élément — la technique margin: 0 auto est plus fiable et ne pose pas de problèmes sur mobile.

Méthode de diagnostic avec l'inspecteur navigateur

Avant de modifier quoi que ce soit, identifiez précisément quel sélecteur CSS contraint votre bannière :

1. **Clic droit** sur la bannière → **Inspecter l'élément**
2. Dans l'onglet **Styles**, repérez les propriétés `max-width`, `max-height`, `overflow: hidden` qui limitent l'affichage
3. Identifiez le **fichier source** et le **numéro de ligne** de chaque règle
4. Vérifiez la **spécificité CSS** : une règle dans `global.css` peut écraser celle de `blockbanner.css`

Cette étape est indispensable. Chaque thème PrestaShop a sa propre structure CSS, et copier une solution trouvée en ligne sans vérifier les sélecteurs actifs sur votre site est la première cause d'échec.

Bonnes pratiques pour les bannières PrestaShop

Préparer l'image en amont

• **Largeur optimale** : 1170px (grille Bootstrap par défaut) ou 1920px pour un affichage pleine largeur
• **Format** : WebP avec fallback JPEG pour les anciennes versions de PrestaShop
• **Poids** : compressez sous 150 Ko pour ne pas impacter le temps de chargement
• **Ratio** : gardez un ratio cohérent (ex : 1170×300 pour un bandeau classique)

Où placer vos modifications CSS

Ne modifiez jamais directement les fichiers du module ou du thème par défaut. En cas de mise à jour, vos changements seront écrasés.

PrestaShop 1.6 : Créez un fichier custom.css dans votre thème et chargez-le via le fichier header.tpl.

PrestaShop 1.7 / 8.x : Utilisez un thème enfant ou ajoutez vos styles dans themes/votre-theme/assets/css/custom.css, référencé dans theme.yml :

assets:
  css:
    all:
      - id: custom-styles
        path: assets/css/custom.css
        priority: 200

Responsive : ne pas oublier le mobile

Ajoutez des media queries pour adapter la bannière sur petit écran :

@media (max-width: 768px) {
  .banner img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    object-position: center;
  }
}

La propriété object-fit: cover permet de recadrer proprement l'image sans déformation sur mobile, plutôt que de la réduire jusqu'à devenir illisible.

Récapitulatif des fichiers à modifier

VersionFichier moduleFichier thèmeRecommandation PS 1.6`modules/blockbanner/blockbanner.css``themes/default-bootstrap/css/global.css`Thème enfant ou `custom.css` PS 1.7`modules/ps_banner/views/css/ps_banner.css``themes/classic/assets/css/theme.css`Thème enfant PS 8.x`modules/ps_banner/views/css/ps_banner.css``themes/classic/assets/css/theme.css`Thème enfant + `theme.yml`