Bannière extensible

Bonjour à tous, j'ai un petit soucis au niveau de ma bannière qui est composée de 5 parties de façon à rendre seulement les côtés extensibles, voici un petit schéma de ce que j'aimerai obtenir



voici mon code html :

<div id="header">
<div id="banniere_gauche">
</div>
<div id="banniere_repeat_gauche">
</div>
<div id="banniere">
</div>
<div id="banniere_repeat_droite">
</div>
<div id="banniere_droite">
</div>

pour le css j'ai vraiment essayé toute sorte de combinaison à base de float left , right , de largeur en % etc mais je n'arrive vraiment pas à résoudre ce problème

je précise que j'aimerai que les parties fixes extérieures soient vraiment collées aux extrémités de la page et ainsi le vide qu'il y a entre ces parties fixes et la partie centrale serait comblée par mes images répétables, dites moi s'il y a plus simple comme méthode car j'ai l'impression de bien me prendre la tête pour un truc tout con ...
Modifié par adef51 (30 Jan 2012 - 18:29)

Voilà un exemple parmi sûrement tant d'autres:

http://dabblet.com/gist/1708122

/**
 * Centrer une bannière en CSS avec des côtés fixes et des blocs étirables
 *
 * @note: De manière plus moderne, le display table et l'utilisation
 * de border-image pourraient aussi être des solutions possiblement
 * plus propre.
 *
 */
#banniere {
	position: relative;
	height: 100px; /* pour donner une taille */
}
#banniere > div {
	height: 100px;
	min-width: 100px;
}
.ban_gauche {
	background-color: red;
	position: absolute;
	left: 0;
	top: 0;
}
.ban_repeat_gauche {
	background-color: yellow;
	float: left;
	width: 50%;
}
.ban_droite {
	background-color: blue;
	position: absolute;
	right: 0;
	top: 0;
}
.ban_repeat_droite {
	background-color: green;
	float: right;
	width: 50%;
}
.ban_centre {
	background-color: pink;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -300px;
	width: 600px;
	z-index: 2; /* pour s'assurer que le centre soit toujours au dessus des autres. À spécifier selon ton cas précis */
}

Bonjour,

En CSS3 avec un seul élément et des backgrounds multiples c'est jouable. Mais pas compatible IE 7-8 (support ok dans IE9).

Autrement, pour placer des éléments de décoration (et notamment les images aux extrémités) j'utiliserais plutôt le positionnement absolu. Et pourquoi pas des pseudo-éléments :before et :after si je me fiche de la compatibilité IE7 pour cet effet.

Pour la base (images répétables sur les côtés et une image au centre), on peut voir cet exemple:
http://fvsch.com/code/fond-triptyque/