フォームボタン内の背景画像のサイズを自動的に変更するにはどうすればよいですか？

Question

私の質問は次のとおりです。

「カートに入れる」ボタンがページにあります：http://www.ctr-ring.com/lds-book-store/band-ctr-ring-white

.button { 
background: url("/sites/all/themes/flexcart/images/button_cart.png") no-repeat scroll right top transparent; 
height: 25px; 
line-height: 25px; 
padding-right: 5px; 
} 

「カートに入れる」ボタンの背景が（ワイド279px）大きいが、このページにある、それは「カートに入れる」というテキストと120px幅の同じ背景のボタンに適しています。 この背景画像は、279pxから120px幅に自動的にどのようにリサイズされますか？

これはこのページでどのように行われますか？

同じ幅ボタンの背景画像をさまざまなテキストボタンの長さに合わせて使いたいからです。

Answer 1

これは1つの背景画像ではなく、2つです。ボタンがDIV内のスパンである：

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

DIVの背景画像は、ボタンの左側を示し、スパン上の背景画像は、ボタンの右側を示します。この手法は「CSSスライドドア」と呼ばれています。 this articleをご覧ください。