28234 sujets

CSS et mise en forme, CSS3

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:
upload/61547-screenpeti.png

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
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.

Smiley smile
Modifié par Zelena (30 Mar 2016 - 13:53)
astrid2776 a écrit :
ça alors, ça ne marche pas non plus Smiley decu

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 Smiley eek .

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).

Smiley smile
Sujet clos
Aller à