Bande extensible en largeur

Bonsoir à tous,
cela fait plusieurs années que je fréquente ce site qui m'a beaucoup aidé, mais j'ai aujourd'hui besoin de vous

Je me remet à la conception de sites après quelques années et j'ai un blanc sur un point.

Voila l'allure que j'aimerai donner à mon site :

http://lostgfx.com/vrac/elkeid/elkeidAmini.jpg

en plus gros : http://lostgfx.com/vrac/elkeid/elkeidA.jpg

J'arrive donc à construire tout le corps du site, mais j'ai un probleme pour les côtés du header. Je ne sais plus comment faire pour avoir à gauche et à droite deux bandes ( avec le motif en diagonale, c'est une image de taille 4*130px qui se repete en largeur ) qui prennent toute la largeur sachant que le cadre est centré.

Voila j'espere avoir été clair, merci d'avance pour votre aide

Bonne soirée !

Je suis pas sur d'avoir compris ce que tu veux mais je vais te proposer ça :

<div id="header">
    <div id="logo">
        <img src="mon_logo.jpg" alt="logo" />
    </div>
    <div id="banniere"></div>
</div>

#banniere {
    background:transparent url("mon_image_qui_se_repete.jpg") repeat-x;
    float:left;
    width:520px; //4*130px
    height:___px;
}

Salut,

Tu as deux solutions :
1. La plus simple, probablement : mettre ton image de 4*130px en background-image du body, avec répétition horizontale.
2. Si tu veux que l'image soit sur la balise #header, il ne faut pas centrer celle-ci (puisqu'elle doit toucher les bords latéraux du viewport) mais son contenu. Donc par exemple :

<div id="header">  <!-- pas centré ; image en background ;-->
    <div id="headerBody">  <!-- centré -->
        <logo />
        <banniere />
    </div>
</div>

ou encore :

<div id="header">  <!-- pas centré ; image en background ; text-align:center ; -->
    <logo />  <!-- display:inline-block; -->
    <banniere />  <!-- display:inline-block; -->
</div>

ou autres solutions pour centrer le contenu...

D'accord merci !

Mettre l'image en background du body me semble la meilleure solution, mais je ne sais pas comment faire pour avoir la répétition horizontale seulement. J'ai répétition horizontale et verticale.


Merci encore pour votre aide

background:url("mon_image_qui_se_repete.jpg") repeat-x;

Ou

background-image:url("mon_image_qui_se_repete.jpg");
background-repeat:repeat-y

Modifié par moust (19 Jul 2009 - 13:52)