Home/ Questions/Q 3878002
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T22:33:47+00:00

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

  • 0

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("/sites/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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0