Как автоматически изменить размер фонового изображения внутри кнопки формы?

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

фон кнопки «Добавить в корзину» большой (шириной 279 пикселей), но на этой странице он хорошо подходит для кнопки с текстом «Добавить в корзину» и тем же фоном шириной 120 пикселей.Как это фоновое изображение было автоматически изменено с 279 пикселей до 120 пикселей по ширине?

Как это сделать на этой странице?

Поскольку я хочу использовать тот же width background buttonизображение для различных веб-кнопок, с различной длиной текста.

Answer 1

Это не одно фоновое изображение, это два. Кнопка - это интервал внутри div:

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

Фоновое изображение на div показывает левую сторону кнопки, а фоновое изображение на промежутке показывает правую сторону кнопки. Техника называется «CSS раздвижные двери». Взгляните на эту статью .