[Résolu] Problème image en bg sur div conteneur

Bonjour,

Je n'arrive pas à pouvoir faire recouvrir totalement dans sa hauteur une image placé en "background-image: url(../images/bg.jpg);" sur le div #site celui-ci englobe totalement le site, il y a une variation quand la fenêtre est ouverte dans différentes tailles.
La structure de ma page se présenta ainsi :

html
  body
    <div id="site">
       <div id="banniere">
       <div id="colGauche"> /*colonne gauche */
       </div>
       <div id="colCentre"> /*colonne centre */
       </div>
       <div id="colDroite> /* colonne droite */
       </div>
       <div id ="piedPage"> /* pied de page */
       </div>
   </div><!--site-->

Ce que je ne comprends pas c'est que l'image en bg n'arrive pas à recouvrir totalement mon div site qui englobe complètement ma page.

Ma css :

html {
	height: 100%; /* pour centrer la page  */
}

body {
	height: 100%;
	margin: 0; /* pour éviter les marges */
         text-align: center; /* pour corriger le bug de centrage IE */
	padding: 0;
}

img {border: none;}

#site {
	width: 990px;
	margin: 0 auto;
	padding:0;
	text-align: left;
	height: 100%;
	min-height: 100%;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-y;
	background-position: top;

}

Merci de m'aider car je ne vois pas pourquoi cela ne marche pas, puisque mon div site englobe totalement mon site et donc si je lui applique une image en Bg cela devrai totalement recouvrir le div, biensur cette image je la répette en Y.
Mais cela ne marche pas, car comme le contenue du site dépasse la hauteur normale de mon navigateur, l'image de fond s'arrete à la hauteur de navigateur et non pas à la hauteur du div site... Etonnant non !!!
Modifié par Gobelin (23 Jan 2007 - 15:06)

#site {
	width: 990px;
	margin: 0 auto;
	padding:0;
	text-align: left;
	height: 100%;
	min-height: 100%;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-y;
	background-position: top;
}

En enlevant ça : "height: 100%;" ?

Tu pourrais nous montrer l'exemple en ligne ?

Le problème vient effectivement de la hauteur du bloc figée à 100%.

cela ne change rien au problème que le taille soit spécifié ou pas !
j'ai essayé sans et c'est pire, l'image en BG s'arrête après mon menu
Et oui j'ai bien parcouru la faq avant de poster
Logiquement, comme le parent du div qui englobe totalement le site, à une hauteur de 100% ainsi que la balise html, normalement, l'image placé en BG de ce div devrais occuper toute la hauteur du div puisque je la fait répéter en Y et je la cale en Top... Mais la rien à faire
Modifié par Gobelin (22 Jan 2007 - 15:16)

bah je ne vois pas pourquoi

ceci marche : http://www.graph-site.net/wip

html, body {
	padding: 0px;
	margin: 0px;
	background-color: #4C4C4C;
	font: normal normal normal 12px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
	height : 100%;
}

#conteneur {
width: 770px;
background : #FFF url(images/fond.png) repeat-y;
min-height:100%;
margin:auto;
}

oui,moi aussi je suis entraint de chercher ce qui me causse tout ces problèmes et maux de tête

Ma page est contitué d'un
div bandeau bannière
d'un div menu
d'un div image de séparation
de plusieur div qui corresponde au 3 colonnes qui composent la page
et d'un div pied de page
Donc pas de quoi fouéter un chat ...
Et pourtant.... je m'arrache les cheveux
logiquement cela fonctionne :

html, body {
				height: 100%;
			}
			body {
				height: 100%;
				margin:0;
				padding: 0;
				text-align:center;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#conteneur {
				min-height: 100%;
				width:990px;
				text-align:center;
				margin:0;
				padding:0;
				background-image: url(images/bg.jpg);
				background-repeat: repeat-y;
				background-position: top;	
			}
			.contenu {
				width:700px;
				height:818px;
				margin: 0 auto;
				background-color:#999900;
			}
			.ban {
				width:700px;
				height:130px;
				background-color:#FF0000;
			}
			
			.pied {
				width: 700px;
				height:180px;
				margin: 0 auto;
				background-color:#FF9966;
			}

là pas de prb ca fonctionne, mais quand je fait de même avec ma page cela ne fonctionne plus des que j'introduit mon div de ma colonne gauche, celle-ci dépasse du div #site, visiblement celui-ci n'arrive pas à s'étirer et je ne comprends pas pourquoi !!

Voila ma galère ....

Bizar ... vous avez dis bizar !!! comme c'est bizar !!!
Modifié par Gobelin (23 Jan 2007 - 15:04)

Personne pour venir à mon secour !!!!

Je ne comprend pas pourquoi j'ai ce prb

Comportement différent entre IE7 et Firefox, Opéra = Résultat différent !!!
Ce que je ne comprends pas c'est pourquoi cette différence, je sais que :
si je souhaite afficher une image en arrière plan et sur toute le hauteur du navigateur, j'écri ça :

html, body {height:100%;}
conteneur { width : 990px; min-height:100% background-image: url(../images/bg.jpg) top repeat-j;}

Normalement j'obtiens un image de fonc qui se répette sur toute la hauteur de la fenêtre du navigateur. Mais dés que je met un contenu, là cela déconne entre IE7 et FF, Opéra.
Je ne comprends pas pourquoi !!!

Je me demande si cela ne serai pas dû au faite que chaque élément que compose ma colonne possède un height fixe en px ????
Modifié par Gobelin (23 Jan 2007 - 15:04)

La solution :

J'ai dû tout simplement déterminer la hauteur totale de mon div conteneur.