Sizing Backgroung Image Of a Button According To The Size Of The Button

The following is a fragment of html code that will help you to create button like features whose background images will automatically adjust according to the text length.

I honestly believe that u can use it as such, in most of the scenarios. However you may have to tweak the code if your expectation differs

<div style="position:relative; float: left;">
    <div style="z-index: -1">
        <img src="redButton.jpg" width="70px" height="30px">
    </div>

    <div style="position: absolute; top: 5px; left: 15px;">
        <a href="#" target="frTarget" width="10%" style="color:white;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;text-decoration:none;">Search</a>
    </div>
</div> 

The background image that I have used here is as follows,

The Button that I have got using this code is as follows,

As you can see, the original size of the image has adjusted to the text size...

Hope this helps :)