Config background image to fit the button

[sj_tt6]

Hi,

I have a push button and set its iconCls: 'icon-myimage'. I define in the css file the icon-myimage class as below:

.icon-myimage{background-image: url(../icons/myimage.png); background-size: cover; height:auto; width:auto; max-width:100%; max-height:100%}

The image displays very small in the button. I see in the debug window

.x-btn-default-small-icon .x-btn-icon {

width: 16px;
height: 16px;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

I don't know how these classes are added automatically to my icon. If I disable width & height (16px) in the debug window then the icon fills up the button.

I'm sure there is a way to config the css or in extjs javascript. Can somebody show me how to fix this problem? Thank you!

Regards,

[mitchellsimoens]

Those classes are from the CSS that comes with Ext JS. Your classes need to come before or use the same classes as the default ones to override them.

[skirtle]

The button CSS is quite delicate, generally you'd just specify a background image and no-repeat for the icon.

To set the icon size:

http://docs.sencha.com/ext-js/4-1/#!...tton-cfg-scale

[sj_tt6]

Hi,

I used the scale and it worked. Thank you !