Background attaché quelle que soit la largeur de l'écran.

Bonjour à tous !

Je me suis mis depuis quelques mois aux technologies web, et c'est avec un grand plaisir que j'ai parcouru quelques articles très intéressants sur alsacréation.
Après plusieurs tâtonnements, j'ai décidé de me lancer dans la création d'une page perso (bidon, avouons le) dans le but de mettre en pratique le peu que je sais.

Et voici donc plusieurs jours que je bloque sur quelque chose de frustrant. Petit briefing :

A l'intérieur de mon body, il y a :

<div id="background_container">
    <div id="left_container"></div>
    <div id="right_container"></div>
</div>
<div id="container">
</div>

Avec en css :

#container{
        max-width: 1200px;
        min-width:1000px;
        margin:0 auto;
        position: relative;
}

#background_container{
        width:100%;
	height:100%;
	position:fixed;
}

#background_container>*{
	width:7%;
}

#left_container{
	float:left;
}

#right_container{
	float:right;
}

Au final, dans le cas ou la largeur de l'écran n'excède pas les 1440px; tout se passe pour le mieux dans le meilleur des monde. C'est à dire que mon fond est bien en dessous de mon container, et qu'il n'y a pas d'endroit sans fond autour du container. Autrement dit, le fond et le container forment une couche continue au dessus de mon body.
Là ou les choses se compliquent, c'est lorsque l'écran dépasse les 1440px; dans ce cas, mon fond se détache du container pour rester collé au bord de l'écran (à cause des floats).
La solution semble simple, augmenter la largeur du fond... Sauf que mon fond est un peu particulier, il est généré dynamiquement en JavaScript, et il consomme beaucoup de ressources. Il doit donc impérativement se limiter à cette largeur (oui, il y a surement de l'optimisation à faire derrière tout ça mais je n'ai pas le temps de refaire mon code pour l'instant :x).
Le problème est donc le suivant : Comment faire en sorte que mes deux bandes en background restent collées à mon container même quand la largeur de l'écran dépasse les 1440px ? Ce n'est pas grave si du coup une grosse partie de la page sera uniquement remplie avec le dégradé de mon body, je veux juste que le container et mon background dynamique forment un ensemble continu.

Voici le lien vers mon site si jamais mes explications ne vous suffisaient pas :

http://unbearablebear.free.fr

Merci d'avance pour le temps que vous me consacrerez
Modifié par Unbearable_Bear (18 Sep 2010 - 16:55)

Bump, finalement retour aux sources, j'ai utilisé la formule

<table>
<tr>
  <td class="background_container><div id="left_container"></div></td>
  <td><div id="container"></div></td>
  <td class="background_container><div id="right_container"></div></td>
</tr>
</table>

avec left_container en float right et vice versa ^^'

Et ça à l'air de marcher plutôt bien. J'ai du abandonner le "fixed". Du coup faut que je fasse attention à la hauteur de mon container et celle de mes background container pour qu'elles soient équivalente.

Me reste encore un petit soucis par contre avec ce système, c'est que j'ai deux petites bandes à l'extrême gauche et droite que j'arrive pas à remplir avec mon bg_container sous chrome et d'autre navigateurs. Bizarrement sous FF ça passe nickel. Pour ceux qui ont un écran 1440X ainsi que Chrome et qui veulent bien m'aider :s
Modifié par Unbearable_Bear (19 Sep 2010 - 18:52)