28172 sujets

CSS et mise en forme, CSS3

Bug IE : background large centré dans balise body

Je suis confronté à un bug assez incompréhensible !

J'applique un background centré à la balise body, mon image fait 1600px de large et 390px en hauteur : 


body {
background:url("img/bg.jpg") no-repeat top center #066CF4;
}


ensuite j'ai une balise <page>, qui est en fait le conteneur du site, de 970px.
celui ci est donc centré et vient logiquement se placé au milieu absolu de mon image bg.jpg (voir plus haut dans la balise <body>)


#page {
width : 970px;
margin : 0 auto;
text-align : left;
}


Sur firefox pas de probleme, sur toutes les résolution.

Sur IE, je constate un décallage de 1px, en effet les background des balises body et #page ne s'accorde pas parfaitement !
Mais le plus incompréhensible, c'est que je constate ce probleme seulement sur de très grosses résolutions ! Sur mon écran en 1900x1200 j'ai ce décallage, mais lorsque je m'amuse a réduire la fenetre de IE, le décallage disparait à partir d'une certaine taille ( aux alentour de 1600px )

vraiment la je bloque, alors si vous avez une piste, je suis preneur Smiley smile
PS : j'ai bien cherché sur le site alsacréation et sur google, j'ai rien trouvé à ce sujet.
Modifié par r1z (09 Mar 2009 - 18:39)
Ton image d'arrière plan comprend elle la partie supérieure du bloc situé derrière le texte ou est-ce une autre série de div et de bcg plaquée par dessus ?
Oui mon image bg.jpg dans la balise <body> comprend bien la partie supérieur du bloc. (donc le header et une partie de la page blanche)
Modifié par r1z (27 Aug 2008 - 14:25)
Ce genre de difficultés se posant souvent, j'essaye de les éviter en fractionnant davantage les éléments de ma page. En effet, si tu avais un div de plus avec un background faisant tout (ou partie) du corps de ta page (de tout ce qui est derrière tes textes, menus, etc), la difficulté ne se poserait pas.

Tu as une url ?
Modifié par freshvalerio (27 Aug 2008 - 14:29)
La seule solution pour le moment c'est de faire une image bg.jpg (le background de body) en 1920px de large.

De cette façon seule les résolutions supérieur à 1920px auront ce bug du décalage.

Mais tout de meme j'aimerais bien savoir ce qu'il se passe, d'autant plus que cela alourdi pas mal mon image au final ...
r1z a écrit :
La seule solution pour le moment c'est de faire une image bg.jpg (le background de body) en 1920px de large.


Houla non, je doute que ce soit la seule solution.
Le centrage d'éléments html et d'image de fond ne donne pas toujours les mêmes résultats, il est plus prudent d'éviter de mélanger les deux.

J'ai du mal à comprendre pourquoi tu a besoin d'images aussi larges mais tu dois très certainement t'en sortir en centrant un élément et en lui appliquant l'image de fond que tu désires.
Sujet clos
Aller à