How to automatically resize a background image within a form button?

My question is:

There is "Add to Cart" button on page: http://www.ctr-ring.com/lds-book-store/band-ctr-ring-white

.button {
background: url("/sit开发者_运维技巧es/all/themes/flexcart/images/button_cart.png") no-repeat scroll right top transparent;
height: 25px;
line-height: 25px;
padding-right: 5px;
} 

the "Add to cart" button background is big(279px wide), but in this page, it fits well for the button with text "Add to Cart" and same background 120px wide. How is this background image got automatically resized from 279px to 120 px width?

How this is done in this page?

Because I want to use same width button background image for different web buttons, with varying text lengths.

It's not one background image, it's two. The button is a span within a div:

<div class="button"><span>button text</span></button>

The background image on the div shows the left side of the button and the background image on the span shows the right side of the button. The technique is called "CSS sliding doors". Have a look at this article.