Probleme css: affichage texte sur image

Bonjour à tous,
J'ai un probleme, je travail sur un projet client, et j'ai un ennui au niveau de l'affichage de texte sur ma mini banniere en degradé rouge.

Voici le code html (les balise du genre {texte5} sont des variables dynamique pour mon CMS, ne vous en souciez pas):

<div id="abonnement_art_martial">
<h4>Abonnements</h4> */ C'est ici dans que je n'arrive pas a afficher*/
<!-- BEGIN: messages -->
<!-- BEGIN: row -->

<div class="abonnement_box abonnement_box_art_martial">
<h5>{texte10}</h5>
<p class="abonnement_box_txt">{texte11}</p>
<div class="abonnements_tarifs">
<p class="duree">
{texte12}
</p>
<p class="prix">
{texte13}
</p>
<div class="clearboth"></div>
</div>
<p><a href="../abonnements2" class="btn_abonnement_07">S'abonner</a>
</div>

<!-- END: row -->

</div>

<div class="clearboth"></div>


<!-- END: messages -->




Maintenant voici mon CSS de H4 :

#abonnement_art_martial h4 {
background-image: url(../images/barre_rouge_titre.jpg);
background-repeat: no-repeat;
width: 628px;
height: 28px;
background-color: white;
color: white;
text-indent: -5000px;
margin: 20px 0 0 0;
}


voila, j'espere que vous pourriez m'aider, surtout que je sens que l'erreur est tres simple.
le probleme est tres simple : le texte est ecrit mais ne s'affiche pas

merci beaucoup par avance