Background image of Button capped depending on Text

[wagger]

Hey,
I have a menu as can be viewed in the attached image.

Item 4 and 5 looks bad since the background-image is capped, and its capped depending on the size of the Text for the button. If I increase the number of characters in the text then the background-image will not be capped.

As can be seen in the image, I have my mouse over one of the Buttons and it is clear that the buttons width is far larger than the width of the background image; button width = 100px and the background image is 48x48px.

Here is the css for the image:

<style type="text/css">
    .runoff {
            background-image: url("/Resources/runoff.png") !important;
        }
</style>

Here is the code for the button:

<ext:Button ID="Button2" Scale="Large" Height="60" Width="100"  runat="server" Text="<br><b>SomeText</b>" IconCls="runoff" IconAlign="Top" LabelAlign="Left">
    <Listeners>
        <Click Handler="addTab(#{TabPanel2}, 'idRunoffs', '/Secure/Views/Runoffs.aspx', 'SomeText');" />
     </Listeners>
</ext:Button>

How can I make sure that the image doesnt get capped like this?