[resolu] Pb scroll deux background > html et body

Bonjour,

j'ai placé deux background-image, un sur le html et un autre sur le body.
Le problème est que quand je scroll, la suite du background situé dans le body ne s'affiche pas.
Voici les css (height:100% ne marche que pour IE 6)

html{
height:100%;
background:#E7E2D1 url(images/bg.jpg) 0 0 repeat;
}
body{
height:100%;
background:url(images/left.jpg) 0 0 repeat-y;
}

Avez-vous déjà rencontré ce problème ?
Si oui, comment le fixer ?
Modifié par christ-off (22 Jan 2007 - 10:14)

Je n'y connais pas grand chose. Mais, j'avais un problème de ce type. J'ai dû virer le height. Essaye sinon de faire 2 versions de ton site avec 2 styles différents dont 1 pour IE inférieur à 6 en faisant une dégradation pour IE6.

Merci pour ta rapidité.
Malheureusement, en enlevant le height:100%, le background du body ne descend pas jusqu'en bas si le site est plus court que l'écran.
Je ne comprends pas l'histoire de la dégradation ?
IE6 marche correctement (pour une fois)
Le problème se pose avec IE7, Firefox et Opéra !!!

Arff.
J'avais un souci avec le width moi.
Va voir dans mon sujet "Mon passage des frames à l'overflow", message 7 et qui suivent. On m'a expliqué comment faire la dégradation. Ca serait trop long à expliquer et vaut mieux laisser parler les pros.
C'est juste une piste que je te donne, mais regarde on ne sait jamais.
Je pense que d'autres plus expérimentés te répondront et confirmeront ou non ma supposition.
C'est tout ce que je peux faire, désolé, je suis débutante comme toi.

christ-off a écrit :

IE6 marche correctement (pour une fois)
Le problème se pose avec IE7, Firefox et Opéra !!!

salut,
pour IE7, Firefox et Opera tu utilises

body {
min-height:100%;
}

IE6 n'interprète pas min-height, ce qui est une carence, mais son interprétation du height revient au même, ce qui est un bug, c'est pourquoi ton code a un rendu correct avec IE6.

Donc tout roule

Feuille de style commune

<style type="text/css">
html{

height:100%;

}

body{

min-height:100%;

}
</style>

et, déclarée dans un deuxième temps, feuille de style en commentaire conditionnel pour IE inférieur à IE7

<!--[if lt IE 7]>
<style type="text/css">
body{

height:100%;

}
</style>
<![ endif]--><!-- en enlevant l'espace entre le crochet et endif-->

Modifié par clb56 (20 Jan 2007 - 19:12)

Merci beaucoup !
C'était simple mais il fallait y penser
IE7, IE6, Firefox et Opera fonctionnent bien avec juste

html{
height:100%;
background:#E7E2D1 url(images/bg.jpg) 0 0 repeat;
}
body{
min-height:100%;
background:url(images/left.jpg) 0 0 repeat-y;
}

Ce qui m'étonne un peu vu que comme tu le dis si bien clb56, min-height n'est pas reconnu par IE6

Par contre je me pose une question qui n'a pas grand-chose à voir avec ce topic mais qui rentre quand même en compte :
Pourquoi utiliser des commentaires conditionnels alors que des hacks css permettent de les contourner ?

Edit:
je parle de ces hack :
*:first-child+html {} // IE7
* html {} // IE6
html>body {} // FF, IE7, Op...
Modifié par christ-off (22 Jan 2007 - 13:24)

J'ai le même problème de fond qui disparaît lors du scroll horizontal (et non vertical) sur un site centré. J'ai essayé de remplacer le "min-height" par "min-width" mais ça ne semble pas solutionner mon problème. Avez-vous une solution ?

Merci d'avance !