Un titre avec images de fond qui s'ajuste à la largeur du texte

Bonjour [les amis],

je souhaite faire un titre dont le fond (image) s'ajuste automatiquement à la longueur du texte :
http://root.jeromine.com/tmp/titre.html

le code CSS actuel :

.centreTitre  /* CONTENER  TITRE CENTRE */
{

margin: 0px;
border-bottom: 1px dotted #70C2FA;
padding: 0px;
 
}

.centreTitre  h2 /* LIBELLE  TITRE CENTRE */
{
	background-image: url(i/bg_title_info_biais.gif);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin:0;
	padding-left :15px;
}	

Et dans le HTML :

<div class="centreTitre">
<h2>ajuster le fond à la largeur du texte ? </h2>
</div>

Comment faire pour que le texte soit bien calé entre la partie verte à gauche et le biais à droite. En d'autre termes que le fond dégradé s'ajuste à la longueur de mon texte ?

Merci

Salut

Je te propose d'utiliser un span vide (avec un   à l'intérieur) flottant à gauche avec comme image de fond la partie verte et tu mets comme fond à ton titre une image calée à droite qui dépassera de manière non visible à gauche.


html :

<div class="centreTitre">
<h2>ajuster le fond à la largeur du texte ? </h2>
<span>&nbsp;</span>
</div>

css:

.centreTitre  h2 /* LIBELLE  TITRE CENTRE */
{
	background-image: url(i/bg_title_info_biais.gif);
	background-repeat: no-repeat;
	background-position: left;
             font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin:0;
	padding-left :15px;
}

.centreTitre span
{
            background-image: url(i/crre_vert.gif);
            float: left;
}

FoW

ouais, comme la propriété display: inline-block; n'existe pas encore, va falloir se contenter d'une balise inline... malheureusement, en inline, il ne peux y avoir de dimension ( que tu voulais pour la hauteur pour le background )...

Dis-toi bien que ce que tu veux faire va alourdir inévitablement le code HTML.