How to create a panel with a Background-image in Sencha

0
votes

please I'm trying to set a .png image as a background for a Sencha-touch panel Here is what I have now and its not working unless I put the whole url i.e. http://blah blah blah

MrFantastic.views.home_graphic = new Ext.Panel({
        dock:'top',
        //style:'background-color:url("/images/home_graphic.png");',
        //html: 'graphic_con',
        cls:"home_graphic"
    });

Here is the css that cls:"home_graphic" is suppose to link to if I am correct.

.home_graphic
{
background-repeat:no-repeat;
background-size:contain;
background-image: url('/images/home_graphic.png');
background-position:50% 0;
}

The .png image is in a folder called images in my www parent folder.

1
javascripthtmlcsssencha-touch
It's better to add image to the div, and add that div to panel. – Nag

1 Answers

0
votes

try this option in your css file. 

-webkit-mask-image:url('images/home_graphic.png');