Question

I’m trying to apply an image to a xtype=’button’ however when i do it my button looks like this

How can i make this image fill this button ?

Code (sencha touch 2 js):

        {
            xtype: 'button',
            width: 140,
            height: 60,
            margin: 10,
            right: 20,  

            text: 'Enter',
            html: '<img src="resources/images/Dbutton.png"/>'
        }

Answer 1

If the image is a background image on the button, then use the CSS property background-size.

.mybutton {
    background-size: cover;
}

Note that this won’t work in IE8 or earlier. You’d need to use a polyfill javascript if you want IE8 support. Try this one: https://github.com/louisremi/jquery.backgroundSize.js

Hope that helps.