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

My question is:

In page: http://www.ctr-ring.com/lds-book-store/band-ctr-ring-white

the "Add to cart" button bg is big, but in this page, it fits well for the button.

How this is done in this page?

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

 

Its an image. There is no text, technically. Make different sized images for your buttons.

 

.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;
}

 

Thats the code. All you need to do is replace the button_cart.png with your own button image, revise the dimensions, and place the Html (just like the other site has it) into your page. We call this reverse engineered design.

 

What you are suggesting I know already. I'll put question in another way:
The image :

is 279 px wide. But when you see it in this page: http://www.ctr-ring.com/lds-book-store/band-ctr-ring-white
with "Add to Cart" text over it, it's size is something around 120 px. How is this background image got resized?

 

I think this is the question I was asking:
http://stackoverflow.com/questions/3345615/help-with-auto-resize-of-background-image

But does this link : http://www.ctr-ring.com/lds-book-store/band-ctr-ring-white
using this technique ( in "Add to Cart" button)?

 

The button does not use the entire image width. It uses the left half and right half of the image.

The Html:

<span class="button">
   <span>
      <input type="submit" class="form-submit node-add-to-cart" value="Add to cart" id="edit-submit-17982" name="op">
   </span>
</span>

Code (markup):

The CSS

button {
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    height: 29px;
    line-height: 29px;
    padding-right: 13px;
    text-decoration: none;
}
.button span {
    display: inline-block;
    height: 29px;
    line-height: 29px;
    padding-left: 10px;
}
span.button {
    vertical-align: middle;
}
.add-to-cart .button, .category-grid-products .button, .views-field-buyitnowbutton .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;
}
.add-to-cart .button span, .category-grid-products .button span, .views-field-buyitnowbutton .button span {
    background: url("/sites/all/themes/flexcart/images/button_cart.png") no-repeat scroll left top transparent;
    height: 25px;
    line-height: 25px;
    padding-left: 33px;
}
.button span input {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}
.add-to-cart input, .category-grid-products input, .views-field-buyitnowbutton input {
    color: #69A91D !important;
}

Code (markup):

 

The tutorial you found is correct. From looking at the source code, the way it works is this:

"Add to cart" has a .button class and .button span :

<span class="button"><span><input type="submit" name="op" id="edit-submit-17982" value="Add to cart" class="form-submit node-add-to-cart" /></span></span>

So the technique is exactly the same you found - .button moves image to the right, span (on the top of it) to the left. There is also padding involved, basically it's sth like this:

.button {
height:25px;
line-height:25px;
background-image: url();
background-repeat: no-repeat;
background-position: right top;
display: block;
width: 80px;
padding-right: 5px;
}


.button span {
height:25px;
line-height:25px;
background-image: url();
background-repeat: no-repeat;
background-position: left top;
display: block;
padding-left: 33px;
}


.button controls the size

 

Yep. What he said.

A single add-to-cart image is much simpler though. ;o)

 

My code refers to the same one image - just used twice.