Problème image background

Bonjour,

Je cherche depuis quelques semaines comment résoudre mon problème et je n'ai toujours pas trouvé, c'est pourquoi je poste ce message:

Mon problème est que l'image de background de mon div "container" ne se fixe pas quand on scroll (voir image)

Peut-être me direz-vous de mettre ce fond sur le body mais j'ai déjà un fond dessus.

Je n'affiche pas le code html puisque c'est simplement un div "container" implémenter entre les balises body.

Voici le code css :

body
{
background:url(../images/background.gif) #0f2b9c fixed;
scrollbar-base-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#0f2b9c;
scrollbar-track-color:#0f2b9c;
}
#container
{
position:absolute;
width:850px;
top:0px;
left:50%;
height:100%;
margin-left:-425px;
background:url(../images/fd.gif) #ffffff scroll;
z-index:30;
}
#containerfoot
{
position:absolute;
width:500px;
left:50%;
margin-left:-320px;
height:36px;
bottom:-50px;
background-color:red;
}
#fdbasdroit
{
position:absolute;
width:25px;
height:36px;
right:0px;
background-image:url(../images/fdbasdroit.gif);
z-index:1;
}
#fdbasgauche
{
position:absolute;
width:19px;
height:36px;
background-image:url(../images/fdbasgauche.gif);
z-index:1;
}
#fdbas
{
position:absolute;
width:456px;
height:36px;
left:19px;
background-image:url(../images/fdbas.gif);
text-align:center;
z-index:1;
}
#fdbangauche
{
position:absolute;
width:202px;
height:147px;
left:30px;
background-image:url(../images/fdbangauche.gif);
z-index:1;
}
#fdban
{
position:absolute;
width:525px;
height:64px;
left:232px;
top:5px;
background-image:url(../images/fdban.gif);
z-index:1;
}
#fdbandroit
{
position:absolute;
width:93px;
height:87px;
right:30px;
background-image:url(../images/fdbandroit.gif);
z-index:1;
}
#containerfct
{
position:absolute;
width:308px;
height:57px;
left:50%;
margin-left:-154px;
top:5px;
z-index:2;
}
#fdmenufctgauche
{
position:absolute;
width:29px;
height:57px;
background-image:url(../images/fdmenufctgauche.jpg);
}
#fdmenufct
{
position:absolute;
width:250px;
height:57px;
left:29px;
background-image:url(../images/fdmenufct.jpg);
text-align:center;
}
#fdmenufctdroit
{
position:absolute;
width:29px;
height:57px;
right:0px;
background-image:url(../images/fdmenufctdroit.jpg);
}
#fdmenuhaut
{
position:absolute;
width:146px;
height:32px;
left:30px;
top:147px;
background-image:url(../images/fdmenuhaut.gif);
z-index:2;
}
#raquette
{
position:absolute;
width:68px;
height:52px;
right:0px;
background-image:url(../images/raquette.gif);
z-index:5;
}
#fdmenu
{
position:absolute;
width:146px;
height:300px;
left:30px;
top:179px;
background-image:url(../images/fdmenu.gif);
z-index:5;
}
#fdmenubas
{
position:absolute;
width:146px;
height:31px;
left:30px;
top:479px;
background-image:url(../images/fdmenubas.gif);
z-index:2;
}
#fdrecherche
{
position:absolute;
width:224px;
height:41px;
top:62px;
right:135px;
background-image:url(../images/fdrecherche.gif);
z-index:1;
text-align:center;
}
#contenu
{
position:absolute;
width:600px;
top:140px;
right:40px;
z-index:5;
background-color:#ffffff;
}

Merci de bien vouloir m'aider.

Damien

bonjour,

A priori il te faut un min-height:100% ,
par ailleurs le container poser en static avec un margin:auto; et surcharger d'un text-align:left; (+text-align:center dans body, centrage pour IE mode quirk.) devrait permettre de se defaire des marges negatives.
html et body necessiteraient un height:100%;

GC

<edit> Tout ses position:absolute sont source de problemes qui deviennent vite ingerables , je suppose que c'est ton "editeur" qui te les imposent .
Modifié par gcyrillus (16 Nov 2006 - 15:27)

Je viens de trouver une solution en mettant le background sur le body,sans mettre de height, et j'ai modifié l'image du background pour qu'il fasse 2000px de largeur.

Merci quand même pour ton aide.
Modifié par damanium (16 Nov 2006 - 19:24)