Double background en fond d'un site

Salut à tous,

pour preciser le contexte voici ce que je veux faire

Je veux faire un fond général à tout le site composé d'un background à gauche différent d'un background à droite. Mon site a une taille fixe 800 pixels centré, imaginez que ce qui dépasse à droite est vert et ce qui dépasse à gauche est rouge...

Alors pour faire ça j'ai crée 2 divs

#backleft{ position:relative; float:left; width:50%; height:101px;background: url("../images/back_left.gif") repeat-x;}
#backright{ position:relative; float:right;	width:50%; height:101px; background:#325D78 url("../images/back_right.gif") repeat-x; }

a fonctionne bien...ensuite il faut que le div central de 800 pixels vienne se mettre au dessus et c'est la le souci :

Firefox arrive bien mais IE prend en compte la hauteur d'un background apparement et affiche le centre 101px décalé vers le bas

#global{ position:relative; margin-left:auto; margin-right:auto; text-align:left; width:773px;}

Qe puis-je faire pour résoudre le problème ?

Merciii

Vero a écrit :
Bonjour,


Et en faisant un seul fond, intégrant les deux couleurs, en repeat-y ?

Désolé mais là je vois pas très bien ce que tu veux dire ?

Peux-ton avoir un visuel de ce que tu veux faire ?

Si j'ai bien compris, tu veux un contenu de 800 px centré avec un fond bicolore derrière qui s'étire en fonction de la taille de l'écran.

D'abord, un petit détail, une taille de 800 px n'est pas la plus inteligente. Elle est à la fois trop grande pour les 800/600 aui se retrouveront avec une barre horizontale et reste assez petite pour les écrans plus grands. Je te conseille de choisir une taille un peu plus petite, ou si tu décides de laisser les 800/600 de cotés, une taille plus grande, optimisée pour les 1024.

sinon, pour ton problème

Je te conseille de placer tes deux fonds en position absolute; les deux avec un top 0px et un left ou un right 0px en fonction du fond.

Ensuite, tu peux coder le reste de ton site (le contenu qui fait 800 px) de facon totalement indépendante.

En effet, l'erreur dont tu parles vient du fait d'IE6 prend en comtpe la taille des flottants dans la taille finale de ses Div.

yahrou a écrit :
D'abord, un petit détail, une taille de 800 px n'est pas la plus inteligente. Elle est à la fois trop grande pour les 800/600 aui se retrouveront avec une barre horizontale et reste assez petite pour les écrans plus grands. Je te conseille de choisir une taille un peu plus petite, ou si tu décides de laisser les 800/600 de cotés, une taille plus grande, optimisée pour les 1024.

Les valeurs de référence pour un design fixe en pixels sont 760px (compatible résolutions 800x600 et plus) et 980px (compatible résolutions 1024x768 et plus). L'idéal reste le design fluide, avec pourquoi pas la possibilité de limiter la largeur en pixels ou en EM pour éviter des choses trop larges sur les écrans en haute résolution.

Pour revenir au problème :
- La solution la plus simple est de mettre une image de fond sur body, avec un background-position : center top;.
- Suivant le design à réaliser, ça ne conviendra pas forcément, par contre.
Modifié par Florent V. (05 Mar 2007 - 14:43)

Yop c coul merci pour vos réponses

la solution de yahrou fonctionne très bien, en position absolute avec left ou right à 0px.

Pour la taille de 800px en fait c'etait juste pour vous exposer le problème en fait j'ai déjà 760 pixels