Comme avoir une image sur toute la largeur de la page ?

[USB83]

Salut,

Sur la page d'accueil, j'aimerai remplacer le slider et les 2 blocs qui s'affichent par défaut, par une image qui prend toute la largeur de la page.

Comme sur l'exemple en pièce jointe

 

En modifiant le tpl index.tpl j'ai pu mettre une image mais elle reste à l'intérieur du cadre

<div id="columns" class="container">

qui impose une largeur max de 1170px, alors que j'aimerai que ça déborde pour prendre toute la largeur de la page

Merci

[Mediacom87]

Bonjour,

pour ce faire il faut changer l'emplacement du hook présent dans le code source du template pour réussir à le sortir de la div qui bloque la largeur d'affichage et le laisser libre pour al largeur.

[USB83]

Salut

Merci pour ta réponse

Finalement, la modification doit se faire dans le fichier header.tpl plutôt que index.tpl

Le fichier contient d'abord cette partie du haut de la page

<div id="page">
  <div class="header-container">
      <header id="header">

Bannière
Logo - recherche - panier
Menu/Navigation

      </header>
  </div>

Juste après j'ai placé cette portion pour ma bannière :

<div class="container-fluid">
   <div class="row" style="width: 100%;display: inline-block;height: auto;">
       <img class="img-responsive" src="image-banniere-2500px_500px.jpg">
   </div>
</div>

Et ensuite le tpl continue avec :

<div class="columns-container">
                <div id="columns" class="container">

 

Si tu peux me dire ce que tu en penses, si c'est propre, ce que tu aurais fait différemment ...

Merci encore

ps : Je vais à présent essayer de voir comment utiliser deux bannière différentes pour que ce soit responsive, afin qu'une bannière soit affiché sur les écrans tablette (paysage) et desktop et une bannière différente s'affiche si le visiteur utilise un smartphone ou une tablette (mode portait).
Là aussi si tu as des astuces, ce serait sympa