0

Currently I have a button 

<input id="fireAction" type="button" class="submit" onclick="disableSubmit('preFlight');"><br>

Then I change the background image of the button in different case

eg.

#('#fireAction').css('background-image','url(fail.jpg)');
#('#fireAction').css('background-image','url(success.jpg)');

However, since the size of fail.jpg / success.jpg is not the same, how to define some css (Tried width:auto but not working) to make the button fit the size according to the size of background image? thanks

user782104
  • 13,233
  • 55
  • 172
  • 312
  • 1
    Please post a functional example that illustrates your problem on [jsFiddle](http://jsfiddle.net/). – palaѕн Jun 24 '13 at 06:59
  • If you are using CSS3 you can add "background-size" to set the same size to both background images. – maqjav Jun 24 '13 at 07:00
  • 1
    if you are changing the `background-image`, might as well change the `width`? Alternatively, you could have 2 separate classes `.fail` and `.success` and you could toggle these using jQuery – painotpi Jun 24 '13 at 07:00
  • Add a class on your button .Please refer the below URL. http://stackoverflow.com/questions/1733006/css-force-image-width-and-height-without-stretching – Harikant Jun 24 '13 at 07:02

1 Answers1

3

I don't know whether you are looking for JS, jQuery or CSS answer, but as far as CSS goes, you cannot resize the element based on the background-image, what you can do is, you can use input type=image here

<input type="image" src="#" alt="Image" />

Or if you want to stick with JavaScript or jQuery, than declare 2 classes with custom width's and toggle them as per your requirement

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278