Background-position:bottom; > Ne colle pas au bas de page...

Bonjour à tous,

Voilà, je ne sais pas si quelqu'un a déjà eu ce problème mais je cherche à coller une image (1900px par 700 pour info) en bas de page.
J'ai donc, pour les css :

body {
  background-color: white;
  min-height:100%;
  background-image:url(images/fond.jpg);
  background-repeat:no-repeat;
  background-position: bottom;
}

Or cela affiche mon image vers le milieu de ma page..

Si quelqu'un avait une idée, ou même une insulte si je passe à côté d'une évidence ou d'un basique... merci d'avance !
Modifié par Space-Cowboy (13 Mar 2014 - 15:37)

Il faut le code complet, car les définitions de hauteur en % sont des définitions relatives au parent.
Donc si tu ne définit pas une hauteur pour la balise html (qui peut être de 100% et elle prendra ainsi comme valeur la hauteur de la fenêtre) alors la balise body prendra pour hauteur celle de la balise html qui, si il n'y a pas assez de contenu peut, ne pas être égale à la hauteur de la fenêtre.

J'espère que tu me comprendra car je me comprend pas bien

Une autre manière de le faire pourrait être de mettre l'image en background d'une nouvelle div placé en position : absolute; bottom : 0; mais se serait moins propre .
Modifié par thej8 (13 Mar 2014 - 17:07)

Hello,

Merci pour ta réponse
Le height est en 100% aussi.
Mais je viens de comprendre un truc, l'image se colle bien au bas du navigateur MAIS ne descend pas avec le scroll, du coup, comme ma page a du contenu sous la ligne de flottaison, et bien l'image reste au "milieu", qui était "le bas" avant le scroll...
Un petit background-position:absolute ? ^^

Merci d'avance

Tu peut mettre ton code dans un cssdeck, codepen ou autre ?
Modifié par thej8 (14 Mar 2014 - 08:55)

Effectivement, si le html est en height: 100%; et le body en min-height: 100%; Le body devrait s'étendre et l'image devrait se mettre en bas du body. Assurément une autre règle CSS non présentée ici doit mettre en charpie ce que tu tentes de faire. (Genre un height: 100% sur le body qui traine ailleurs )

Sans voir un exemple concret, difficile de savoir quoi.

re-hello !
En fait, j'ai résolu mon problème par "fixed" mon background. Cela ne répond pas à la question mais l'effet est meilleur pour le design, donc plus besoin de trouver comment le faire coller au bas de page.

Merci à vous

Edit : J'ai vidé toute la page de ses balises en ne lui laissant qu'un <p> bien rempli dans son body et le problème était le même. Pour information, j'ai laissé le css de bootstrap en l'état, le problème vient donc d'une de leurs règles ?
Modifié par Space-Cowboy (14 Mar 2014 - 09:56)

Sans code on ne peut pas te dire si il y a conflit avec le css du bootstrap mais je ne pense pas il est relativement bien fait pour évité ca. Même si bien sur ne pas l'utilisé permet de s'éviter d'éventuels pb.