How to adapt image to button size?

Question

How can I make the background image of my button adapt to the button's size? If my image is 2800x1300 how can I make it adapt to a 1000x540 button? Please help a guy in need !

Answer 1

Really depends on the situation but maybe this will help:

background-size: cover

Or

background-size: contain

See what works best.

Answer 2

Use : background-size:cover;

fiddle

 .button { background: url(http://theimageconference.org/wp-content/uploads/2014/01/images-50x50.png) no-repeat; cursor: pointer; border: none; background-size: cover; width: 50px; height: 50px; } 

 <input type="button" name="button" class="button" /> 

Answer 3

You can use background-size:cover;

It Scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

To see how this exactly works go here