Découper une interface pour l'implémenter en XHTML/CSS

[Paul]

Alors, voilà ce que j'ai concocté, pour le cadre central, suivant tes indications :

Code :

    <div id="centre_bas">
        <div id="centre">
            <h1><?=$titrePage?></h1>

            <!-- En cas de sortie non geree par le template -->
            <?if($contents):?>
                <?=$contents?>
            <?endif?>
            
        </div>
    </div>

Explications :

• Le "centre_bas" contient en image de fond l'image du bas.
  
• "centre" met l'image du centre (à savoir du beige au milieu et des bordures grises, j'aurais pu aussi mettre un centre moins large avec une couleur de fond répétée, c'est la même chose)
  
• Le titre a dans le CSS comme image de fond l'image du haut.
  

Problème : le motif du centre (beige + gris sur les côtés) recouvre l'image du bas ! J'ai pas trop trouvé comment éviter ça...

Voici le CSS :

Code :

div#centre_bas {
        background-image: url('./img3/centre_bas.jpg');
        background-position: bottom left;
        background-repeat: no-repeat;
        
        width: 556px;
        
        margin: auto;
}

div#centre {
        background-image: url('./img3/centre_milieu.jpg');
        background-repeat: repeat-y;
        
        margin:auto;
        
}

div#centre h1 {
        background-image: url('./img3/centre_haut.jpg');
        background-repeat: no-repeat;
        
        height: 296px;
        padding-top: 30px;
}

Une idée ?