I am working with a form that includes a submit button featuring a background image.
<button type="button" class="button" alt="Send" onclick="validate_form_newsletter_wide( form )"></button>
Everything works well when I define the dimensions in the 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;
}
If I remove the height and width properties in the CSS, the button disappears. When setting them to 100% each, only a small portion of the button is visible beneath the form.
Is there a way to modify the CSS or the code so that I don't have to specify the size of the image each time, as the dimensions of the image tend to change slightly occasionally?