Button met eigen afbeeldingen

Hoi,

Ik ben aan het kl*te met een button, en het wil maar niet.

Ik heb een button in Photoshop gemaakt met veel effecten en aanpassingen ect. Dus heb deze zo gesliced dat ik 2 afbeeldingen heb. 1 lange (200px) en 1 korte van 48px.

Maar krijg hem niet netjes.

Zie voorbeeld:

Hoe moet ik dit doen?

Waarom perse 2 afbeeldingen?

Omdat er verschillende teksten in moeten.

Je kan gebruik maken van CSS3:

body {
    background-image: url(images/bg.png), url(images/bgtop.png);
    background-repeat: repeat, repeat-x;
}

En dan dus met background-position enzo.

Dit is mijn css:

a.button {
     background: transparent url(button-rechts.png) no-repeat scroll top right;
     color: #fff;
     display: block;
     float: left;
     font: bold 13px Helvetica Neue;
     height: 40px;

     padding-right: 19px;
     text-decoration: none;
     border:none;
     text-shadow: 1px 1px #000;
 }

a.button span {
     background: transparent url(button-links.png) no-repeat;
     display: block;
     padding: 12px 0 12px 18px;
 }

Hoe kan ik het hier in importeren dan?