28172 sujets

CSS et mise en forme, CSS3

[Résolu] Image de fond positionnée

bonjour,
j'ai un petit problème concernant une image de fond dans <body> que je veux positionner en bas de page. sur safari, IE6 et IE7 pas de problème, l'image est bien calée en bas de page avec ce code :


html {
height: 100%;
}

body {
height: 100%;
background: #aaa199 url(../sb_imports/sb-taches.jpg) 50% bottom no-repeat;
}


mais sous firefox (mac et pc) mon image de fond se positionne en bas de l'écran, et non en bas de page... je ne sais pas si je suis clair... c'est à dire que quand le contenu de la page est très long l'image n'est pas tout en bas du contenu mais en bas de la fenêtre du navigateur, et donc en scrollant elle remonte.
le problème est résolu en mettant :
html { height: auto; }


mais ensuite, dans safari et IE, mon pied de page n'est plus positionné tout en bas car il a besoin de l'instruction :

html { height: 100%; }


hors, je ne peux pas avoir les valeur "auto" et "100%" en même temps.
j'ai essayé avec min-height : 100% mais ça ne change rien.

c'est un peu difficile à expliquer, mieux vaut aller voir ce que ça donne en ligne :

adresse du site : http://demo.anybodesign.com/sb/
fichiers css : http://demo.anybodesign.com/sb/css/

si quelqu'un a une idée ce serait super, je ne trouve pas la solution...

merci !
Modifié par beloutte (20 Mar 2009 - 15:24)
Salut,

cela me semble normal (et je suis d'ailleurs surpris par le rendu de Safari) puisque le height: 100%; de body se réfère au viewport (et donc à la taille de l'écran).

Si je comprends bien ce que tu veux j'aurais plutôt fait :

html
<body>
<div id="global">
	<div id="fond_page">
		...
	</div>
	<div id="footer">
		...
	</div>
</div>
</body>
css
body {
	height: 100%;
	background: #aaa199;
}

#global {
	position: relative;
	min-height: 100%;
	background: #aaa199 url(sb_imports/sb-taches.jpg) 50% bottom no-repeat;
}


#fond_page {
	background: transparent url(sb_imports/sb-pages.png) 50% 40px no-repeat;
}


Edit: au passage l'élément A est de type 'en-ligne' et ne doit pas contenir d'élément de type 'bloc' (comme H1) > penser à permuter l'imbrication. Smiley cligne
Modifié par Heyoan (20 Mar 2009 - 14:51)
ok merci je vais essayer ça
donc je rajoute un div pour mon fond...

pour la balise <a> merci j'ai corrigé le header (enfin normalement..)
Modifié par beloutte (20 Mar 2009 - 15:10)
c'est parfait !!
en effet c'est bien mieux comme ça.
j'ai pas re-testé sur IE mais ça devrait aller aussi.

merci 1000 fois Smiley lol
Sujet clos
Aller à