[Résolu]Mettre en place un background-repeat

Bonjour,

je viens vous demander un peu d'aide sur une mise en page CSS que j'aimerais mettre en place.
J'aimerais avoir le contenu de ma page bordé de deux images (à gauche et droite) qui se répètent verticalement.

Voici un extrait de mon code :

<div id="tab_centre">
<div id="tab_gauche"></div>
<div id="tab_droite"></div>
<div id="tab_main">
<center>Contenu texte.</center>
</div>
</div>

Mon CSS :

div#tab_gauche {
float: left;
width:8px;
background-image: url("images/Layer-decoupe_06.gif"); background-repeat: repeat-y;
}
div#tab_droite {
float: right;
width:11px;
background-image: url("images/Layer-decoupe_08.gif"); background-repeat: repeat-y;
}
div#tab_main{
width:872px;
vertical-align:top;
text-align: left;
margin-left:19px;
}

div#tab_centre {
width:918px;
}

Pour l'instant, sous IE, les images ne s'affichent qu'une seule fois et sous Firefox, pas du tout.
Je me suis documenté mais certaines choses m'échappent encore alors si un d'entre vous à une idée sur mon problème, ce serait gentil de m'aider.
J'ai suivi les conseils du tuto "3 colones" avec la propriété "overflow" sans succes pour mon cas.


Merci.
Maxime
Modifié par Maxx (28 Sep 2007 - 12:44)

Bonjour Maxime et bienvenue à toi sur le Forum,

Tu souhaite border un conteneur de taille fixe avec deux images, c'est bien cela ?
Dans ce cas, il me semble la syntaxe que tu mets en place est un peu lourde.
Je te propose donc une autre méthode :

Plutôt que d'insérerer deux <div> inutiles pour afficher les images, je te conseiller tout simplement d'affecter le background total (soit l'image de gauche, le fond du site, et l'image de droite) à ton conteneur.

Pour cela, il te faut :
- Créé un <div id="global"> global qui va contenir l'ensemble de ta page.
- Lui affecter la taille correspondant aux deux images et au contenu (918px).
- Utiliser un logiciel de création d'images pour concevoir l'image d'arrière plan (largeur : 918px - hauteur : 1px)
- L'appliquer en background à ton <div id=global>

Et voilà...
Tu as le résultat escompté !

Bonjour et merci pour l’accueil !

Ta solution est très simple et marche parfaitement ! Tellement facile que je me demande comment je n’y aie pas pensé.
Donc un grand merci à toi et à bientôt (vu que j’ai un autre problème sous le coude )

Maxime.