Problème Image responsive dans le header

[Thierry1964]

Bonjour,

 

j'ai un problème avec l'image du header qui ne se réduit pas quand on reduit la page du navigateur, elle reste comme fixe, la boutique que je suis entrain de créer est la suivante : http://monmarche-fl.com/

Ma version de Prestashop est la 1.6.1.1 et le thème que j'utilise est bien RESPONSIVE.

Je pense que c'est au niveau du global.css qu'il manque du codage et si quelqu'un pourrait me dire ce qu'il ne va pas et comment faire ça serait sympa.

Merci d'avance pour vos réponses.

 

Thierry

Edited September 23, 2015 by Thierry1964 (see edit history)

[Julien64]

Bonjour,

 

Effectivement dans votre global.css, à la ligne 5752, il faudrait rajouter cette instruction "background-size: cover;" au header.

Pas compatible avec des anciennes version de IE il me semble, à tester.

[Thierry1964]

Bonsoir Julien64,

je viens de modifier mon global.css avant de voir ton message, apparement la ça marche avec Firefox sous Mac, faudra que je teste sur un autre pc sous Windows.

Dans le header j'ai rajouté ce codage:

 

header {
  z-index: 1;
  position: relative;
  background-image: url(http://www.monmarche-fl.com/themes/theme1172/img/header-bg.png)no-repeat center bottom; }
  @media only screen and (min-width: 2000px) {
   header {
      background-size: cover; } }
  @media (max-width: 991px) {
    header {
      background-position: center center; } }

 

Pourrais tu me dire si tout est correct ?

En tout cas merci de ta réponse.

 

Bonjour,

 

Effectivement dans votre global.css, à la ligne 5752, il faudrait rajouter cette instruction "background-size: cover;" au header.

Pas compatible avec des anciennes version de IE il me semble, à tester.

[Julien64]

Je ne vois pas d'erreur dans ton code css donc à partir du moment ou tu as l'affichage qui te convient sur les différents écrans c'est parfait

[Thierry1964]

Bonjour Julien,

je viens de mettre une image dans .colums-container et je vois des problèmes en fonction de si je passe en mode GRILLE ou LISTE.

Si par exemple je suis dans la catégorie FRUITS en mode GRILLE, l'image se redimensionne si je réduis mon navigateur, donc la c'est bon, par contre si je passe en mode LISTE, la mon image bouge comme si ce n'était pas la même et en réduisant le navigateur l'image n'a pas l'air de se redimensionner.

Si je vais sur LEGUMES, la s'est la cata, en mode LISTE l'image disparait sur le coté gauche de l'écran comme si l'image était plus grande et quand je passe en mode GRILLE l'image ne se redimensionne pas.

Si sur LEGUMES je choisis n'importe quel légumes, la apparemment tout marche bien et dans les autres catégories aussi, par contre dans le footer il y a 2 pages qui ne redimensionne pas l'image, MENTIONS LEGALES et CGV.

La j'avoue que je suis complètement perdu car je n'ai que rajouté le background size cover dans colums container et je ne comprend pas pourquoi a certains endroits ça marche et a d'autres pas si c'est la même image.

Pourrais tu m'aider a résoudre ce problème ?

Merci d'avance.

[Julien64]

Bonjour,

 

Ce problème d'affichage vient du fait que la solution de l'image en fond et avec background-size:cover n'est pas utilisable ici.

En gros l'affichage du background dépend de la taille de l'élément, ici .colums-container, or quand tu es en mode "liste" sur les pages catégories, cet élément est très long (tu dois beaucoup scroller pour aller en bas de page) donc l'image est très très (trop) étirée.

Pour les pages CMS c'est pareil. Si tu as peu de contenu, l'élément a une hauteur faible donc affichage OK contrairement aux pages ou tu as beaucoup de contenus...

 

Ici j'utiliserai peut être plutôt 2 images, une a droite et une à gauche, pour faciliter la mise en forme. C'est difficile d'utiliser une seule image qui tombe pile poil ou on veut sur un responsive design

[Thierry1964]

Bonjour,

 

Ce problème d'affichage vient du fait que la solution de l'image en fond et avec background-size:cover n'est pas utilisable ici.

En gros l'affichage du background dépend de la taille de l'élément, ici .colums-container, or quand tu es en mode "liste" sur les pages catégories, cet élément est très long (tu dois beaucoup scroller pour aller en bas de page) donc l'image est très très (trop) étirée.

Pour les pages CMS c'est pareil. Si tu as peu de contenu, l'élément a une hauteur faible donc affichage OK contrairement aux pages ou tu as beaucoup de contenus...

 

Ici j'utiliserai peut être plutôt 2 images, une a droite et une à gauche, pour faciliter la mise en forme. C'est difficile d'utiliser une seule image qui tombe pile poil ou on veut sur un responsive design

Bonjour Julien,

désolé pour le retard suite a ta réponse, j'ai abandoné les 2 images pour seulement 1 image en fond qui reste fixe comme tu pourras voir, par contre je voudrai savoir comment je peux remplacer l'image du background url(../img/bg_bt.gif) par un icone fa de font awesome qui se nome: fa fa-cart-plus qui est dans le bouton ajouter au panier en dessous du bloc de commande.

Ce que j'aimerai c'est de pouvoir placer ce "fa cart plus" a la place du background que j'ai dans le tableau de Commande Rapide ci joint ce que je voudrai: