[Résolu] Mettre une image en background dans un espace dynamique

Bonjour le monde ! Ceci est mon premier message sur ce forum alors que je regarde de nombreux tutos et topics depuis longtemps.

J'ai un cas un peu particulier à intégrer et je voulais votre avis, ceci n'est pas bloquant pour mon travail, mais la curiosité (je suis perfectionniste avec nos petits pixels !) de trouver une solution m'envahis.

J'ai un bouton assez simple : un carré gris, avec un texte dedans, un padding pour plus de clarté. La largeur du bouton étant dynamique en fonction de la longueur du texte.
Mais j'aurais besoin d'y rajouter une image, à droite à tant de pixel de la droite du bloc, ou après le texte.

J'ai bien une solution qui fonctionne partout si ce n'est IE7, et puis je n'aime pas cette méthode :

.bt-suivant {
display: inline-block;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 15px;
background: #dfdfdf;
color: #4e4e4e;
}
.bt-suivant:after {
content:url('/bt_suivant.gif');
}

J'aimerais quelque chose qui ressemble à ça en gros :

Je ne sais pas si j'ai été très clair, en tout cas, là tout de suite je n'ai pas trouvé de solution, mais je n'ai pas réfléchis 3h non plus.

Merci d'avance à tous le monde.
Modifié par Tonoki (07 Dec 2011 - 10:23)

Je comprend pas pourquoi tu te compliques la vie comme ça. Il suffit de mettre l'image en fond.

jb_gfx a écrit :
Je comprend pas pourquoi tu te compliques la vie comme ça. Il suffit de mettre l'image en fond.

Peut-on positionner une image de fond à tant de pixels par rapport à la bordure de droite ?
Comme dit plus haut, la taille du bloc étant en fonction du texte (il y aura plusieurs boutons de ce genre), je ne peux donc pas positionner le fond à X pixels de la gauche.

Hello. Au pire, tu peux tricher un peu en rendant ton image un peu plus grande.

Par exemple, si ton triangle fait 10px de large, que tu veux 15px à gauche du texte, 10px entre ton texte et ton triangle, et 15px entre ton triangle et le bord droit du bouton :

..bt-suivant {
    padding-left: 15px;
    padding-right: 35px;
    background-position: right top;
}

Et tu élargis ton gif de 15px transparent sur la droite. Par contre si tu dois utiliser des sprites ce n'est pas terrible.

Salut !

Merci pour la réponse Florian_R, effectivement je n'y avais pas pensé (vendredi soir, dur semaine, ça arrive à tous le monde ).

Testé & approuvé !