кнопку Make размера фонового изображения

Question

У меня есть форма с кнопкой отправки, которая имеет фоновое изображение,

<button type="button" class="button" alt="Send" onclick="validate_form_newsletter_wide(form)"></button> 

Это нормально до тех пор, как я задать размеры для использования в CSS.

.button { 
    position: relative; 
    background: url("index_htm_files/btn_newsletter_wide.png") no-repeat; 
    border:none; 
    cursor: pointer; 
    float: right; 
    height: 51px; 
    width: 200px; 
    margin: 0px; 
    padding:0px; 
    z-index: 999; 
} 

Если удалить высоту и ширину CSS кнопка не отображается, и если установить их на 100% каждый, то я вижу скользят кнопки чуть ниже формы.

Как изменить CSS или код, чтобы мне не нужно было указывать размер изображения, так как размер изображения время от времени будет немного изменяться.

Answer 1

Вы не можете сделать масштаб элемента, соответствующий его фоновому изображению.

У вас нет никакого контента на вашей кнопке, так что это звучит так, будто фоновое изображение на самом деле является образ контента и не должно быть в CSS вообще.

Используйте вместо этого содержимое.

<button type="button" 
     class="button" 
     onclick="validate_form_newsletter_wide(form)"><img 
      src="index_htm_files/btn_newsletter_wide.png" 
      alt="Send"></button> 

Вы можете удалить отступов по умолчанию и границы кнопки с помощью CSS, а также настроить vertical-align изображения так, что она сидит на линии, где вы хотите.