28172 sujets

CSS et mise en forme, CSS3

Fixer une image body background au pied de la page

Bonjour!

Tout est dans le titre.
J'ai tenté ça :

body {	
background:#B2C9AB url(.../pics/background.png) bottom repeat-x;}


Souci : cela a pour effet d'attacher le bas de mon png au pied du dernier <div> inclus dans ce <body>.

Comment faire pour que, quelque soit la longueur de ma page, cette image reste "collée" au bas de l'écran ??

Merci
Bonsoir,

Euh... essaie de le mettre sur la balise html au lieu de la balise body.
Réponse au tact au tac, j'ai jamais rien mis sur cet objet mais c'est la seule idée qui me vienne à l'esprit dans l'immédiat. Enfin ça et définir une hauteur de body minimale de la hauteur de ton écran.

Pour un positionnement constant en bas de l'écran j'ai déjà vu des solutions javascript qui déplacent la div (contenant l'élément du bas dans ton cas) en temps réel mais je ne trouve pas ça très propre.

Bonne soirée,

Smiff.
Modifié par Smiff (08 Dec 2009 - 17:44)
Bonsoir,

De tête sans test, un truc qui marche :
<body>
     <div id="full_height">
          [...]
     </div>
</body>
html, body {
height:100%;}

div#full_height {
min-height:100%;
background:#B2C9AB url(.../pics/background.png) repeat-x bottom; }

J'ai testé ça en vitesse, ça a l'air de passer également :
html {
min-height:100%; }

body {
background:#B2C9AB url(.../pics/background.png) repeat-x bottom;  }

min-height:100% doit être corrigé pour IE6 par un height:100%; à l'aide des commentaires conditionnels.

Autre possibilité en partant de la 1ère solution, créer une mise en page sur toute la hauteur avec un footer collé en bas (et là le tuto).
Sujet clos
Aller à