28172 sujets

CSS et mise en forme, CSS3

Image defond jusqu'en bas de la fenêtre

Bonjour

j'ai un design avec une image de fond répétable (horizontalement + verticalement) et 2 images répétables horizontalement pour le haut de page et le bas de page

je voudrais que l'image du bas soit toujours "collée" au bord bas de la fenêtre du navigateur

j'ai essayé en la plaçant en image de fond de body mais même ainsi, si le contenu est trop court, elle n'est pas au bord bas de la fenêtre
je voudrais éviter de mettre des <br /> inutiles...

comment faire ça proprement svp ?
merci d'avance
Ton css et html serait pas mal pour voir ce qui coince (je parle de la portion concernée biensur) mais à priorie un background:url(tonimage.jpg) repeat-x left bottom; et height:100%; devraient faire l'affaire.
Bonjour,

Elianora la blanche a écrit :
j'ai essayé en la plaçant en image de fond de body mais même ainsi, si le contenu est trop court, elle n'est pas au bord bas de la fenêtre

Il faudrait passer l'élément HTML en height: 100%, et BODY en min-height: 100%.
finalement j'ai placé l'élément html en height: 100%;
mon body est en height: 100% avec l'image de fond répétable dans les 2 sens

j'ai ensuite 2 "mega-div" imbriquées pour l'image du haut et l'image du bas


<body>
    <div id="bg_top">
    <div id="bg_bottom">


avec la css suivante :

html {
	height: 100%;
}

body {
	background: transparent url('bg.png') repeat left top;
	height: 100%;
}

#bg_top {
	background: transparent url('bg_top.png') repeat-x left top;
	height: 100%;
}

#bg_bottom {
	background: transparent url('bg_bottom.png') repeat-x left bottom;
	min-height: 100%;
}


et ça passe même sous IE 7, je suis impressionnée, Microsoft est sur la bonne voie ^^

merci beaucoup en tout cas !
Tu aurais pu faire simplement:
html {
	height: 100%;
	background: /* ici une couleur tout de même */ url(bg.png);
}
body {
	min-height: 100%;
	background: url(bg_bottom.png) repeat-x left bottom;
}
#global {
	background: url(bg_top.png) repeat-x left top;
}
À tester dans IE, par contre. D'ailleurs ça m'intéresse si tu peux tester ça, je suis en train d'utiliser cette disposition pour un projet et ça m'arrange si ça passe dans IE. Smiley lol
Tiens, me semblait que les background sur html ne fonctionnait pas, ou du moins les background image... après sur quel nav je ne sais plus mais me semble bien avoir constaté que ça ne fonctionnait pas... maintenant le café peut faire du mal à un cerveau sein... alors un malsain je vous raconte pas.
Sujet clos
Aller à