Background footer responsive qui déborde sur pc

Bonjour,

J'ai pu intégrer une image en background dans le footer (pour un site marchand sur Prestashop) et celle-ci s'affiche correctement sur smartphone et en fenêtre réduite.
Comme ci-dessous:


Le soucis est que l'image déborde en bas lorsque je suis en plein écran sur pc.
Voici mon code CSS:

.footer-container {
    background: /*url(../img/footer.jpg)*/ #ffffff url(../img/footer.jpg) no-repeat scroll center center / cover ;
    border: 0 none;
    margin: 0;
    min-height: 100%;
    padding: 0;
	max-width: 100%;
	height: auto;
-webkit-background-size: cover; /* pour Chrome et Safari */ 
-moz-background-size: cover; /* pour Firefox */ 
-o-background-size: cover; /* pour Opera */ 
	  background-size: cover;
	 }
  @media (min-width: 768px) {
    .footer-container {
	   background: /*url(../img/footer.jpg)*/ #ffffff url(../img/footer.jpg) no-repeat scroll center center / cover ;
    border: 0 none;
    margin: 0;
    min-height: 100%;
    padding: 0;
	max-width: 100%;
	height: auto;
-webkit-background-size: cover; /* pour Chrome et Safari */ 
-moz-background-size: cover; /* pour Firefox */ 
-o-background-size: cover; /* pour Opera */ 
	  background-size: cover;
	}

Merci d'avance pour votre aide

tente de faire un overflow hidden dans ta div conteneur footer-container

Merci pour ta réponse!

J'ai essayé et ça ne semble pas bouger d'un pouce

peut on tester en ligne ? as tu un lien ?

J'ai oublié de préciser que je travail en local

Bonjour !

J'ai essayé de comprendre les différences dans votre CSS entre une fenêtre d'affichage dont les dimensions sont indéterminées et une fenêtre d'affichage qui a au moins 768px de large et je n'en ai vu aucune...

Au passage, seules les différences sont intéressantes à mettre dans une directive media.
Et c'est plus facile à lire.


Modifié par Zelena (30 Mar 2016 - 13:53)

alors essaye un overflow hidden sur ton body / html

ça alors, ça ne marche pas non plus

Zelena, si j'enlève media ça ne risque pas de créer de problèmes?

astrid2776 a écrit :
ça alors, ça ne marche pas non plus

Zelena, si j'enlève media ça ne risque pas de créer de problèmes?

Zelena n'a pas dit d'enlever media, il/elle a dit que dans media il faut juste mettre les paramètres qui vont changer lorsque celui ci est appliquer (dans ton cas quand l'écran est d'un maximum de 768 px de largeur) et que c'est pas la peine de tout réécrire en double.

Essaye de recréer ton problème sur codepen ou jsfiddle, parce que là je vois pas. Ou mettre une version en ligne..
Modifié par JENCAL (31 Mar 2016 - 17:51)

Bonjour,

Du nouveau:
J'ai mis une hauteur minimum en pixel et cela dépasse moins en hauteur sur pc. Par contre depuis que j'ai installé un module pour les cookies, je me suis aperçue que ça déborde en largeur maintenant pour la version tablette et la version smartphone, mais même avec une synchro et tout ça reste tel quel .

En effet si j'avais pu mettre le site en ligne ç'aurait été plus simple mais je ne suis pas autorisée à le faire tant que le site ne sera pas terminé.

Bonjour !

Si c'est un problème de confidentialité qui vous empêche de mettre le code en ligne, pourquoi ne pas changer le texte et les images ?

Et peut-être qu'ainsi vous trouverez la solution vous-même ; quand j'ai une difficulté (en CSS), je fais une version simplifiée, ça me permet souvent de cerner le problème (et de trouver la solution).

Bonjour!

En effet c'est tout bête, je n'avais pas pensé à ça. Merci Pour le tuyau