title: How to adjust the image in sencha touch image panel?
body: <p>Can any one help me to display image totally in the image panel.50% of the screen should display image and another 50% has some menus. In the 50% image block , I am not getting image fully. Here is my snippet.</p>
  
  <pre><code>Ext.define('scheduler.view.Main', {
          extend: Ext.Panel,
          xtype: 'main',
          config: {
              fullScreen: true,
              layout: 'vbox',
              scrollable: true,
              cls: 'mainLayout',
              height: '100%',
              items: [
                  {
                      cls: 'mainbackgpanl',
                      docked: 'top',
                      height: '50%'
                  },
                  {
                      xtype: 'spacer'
                  },
                  {
                      xtype: 'panel',
                      layout: {
                          type: 'hbox',
                          pack: 'center'
                      },
                      items: [
                          {
                              xtype: 'button',
                              width: '50%',
                              layout: {
                                  pack: 'center'
                              },
                              ui: 'normal',
                              text: '&lt;div align="center"&gt;&lt;img width="64px" height="64px" src="resources/images/calendar-icon.png"  style="vertical-align: middle"&gt;&lt;br /&gt;&lt;p class="icon_text"&gt;Calendar&lt;/p&gt;&lt;/div&gt;',
                              style: 'background: none; border:none;',
                              handler: function() {
                                  scheduler.f.onCalendarTap();
                              }
                          },
                          {
                              xtype: 'button',
                              ui: 'normal',
                              width: '50%',
                              layout: {
                                  pack: 'center'
                              },
                              text: '&lt;div align="center"&gt;&lt;img width="64px" height="64px" src="resources/images/book-event.png"  style="vertical-align: middle"&gt;&lt;br /&gt;&lt;p class="icon_text"&gt;Book Event&lt;/p&gt;&lt;/div&gt;',
                              style: 'background: none; border:none;',
                              handler: function() {
                                  scheduler.f.onBookEventTap();
                              }
                          }
                      ]
                  },
                  {
                      xtype: 'spacer'
                  },
                  {
                      xtype: 'panel',
                      layout: 'hbox',
                      items: [
                          {
                              xtype: 'button',
                              ui: 'normal',
                              width: '50%',
                              layout: {
                                  pack: 'center'
                              },
                              text: '&lt;div align="center"&gt;&lt;img width="64px" height="64px" src="resources/images/events.png"  style="vertical-align: middle"&gt;&lt;br /&gt;&lt;p class="icon_text"&gt;Events&lt;/p&gt;&lt;/div&gt;',
                              style: 'background: none; border:none;',
                              handler: function() {
                                  scheduler.f.onEventsTap();
                              }
                          },
                          {
                              xtype: 'button',
                              ui: 'normal',
                              width: '50%',
                              layout: {
                                  pack: 'center'
                              },
                              text: '&lt;div align="center"&gt;&lt;img width="64px" height="64px" src="resources/images/blocked.png"  style="vertical-align: middle"&gt;&lt;br /&gt;&lt;p class="icon_text"&gt;Blocked&lt;/p&gt;&lt;/div&gt;',
                              style: 'background: none; border:none;',
                              handler: function() {
                                  scheduler.f.onBlockedTap();
                              }
                          }
                      ]
                  },
                  {
                      xtype: 'spacer'
                  }
              ]
          }
      });
  </code></pre>
  
  <p>and here is my css</p>
  
  <pre><code>.mainbackgpanl &gt; div{
           background: url("http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg") center ; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
           background-size:cover;
       }
  </code></pre>
  
  <p>Thanks in Advance.</p>