I'm trying to add a custom skin with a background image to my application that entirely fits the entire screen of any device. This is the skin:

     <?xml version="1.0" encoding="utf-8"?>  
 <s:Skin name="CustomMainSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
 alpha.disabled="0.5" >
 <s:states> 
<s:State name="normal" />
 <s:State name="disabled" /> 
</s:states> 
 <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Application")] ]]> </fx:Metadata>
  <!-- fill --> 
<s:BitmapImage id="img" 
source="assets/background.jpg"
 scaleMode="stretch" fillMode="scale" smooth="true" left="0" right="0" top="0" bottom="0" /> 

 <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" />
</s:Skin>

If i set the skin on the application everything looks great, the image resizes to the screen needs, but all componnents dissapear and i am not able to edit any view.

      <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="240" xmlns:components="views.*" 
creationComplete="removeTab1DefaultView(event)" skinClass="skins.CustomMainSkin"     > 
 <s:ViewNavigator label="Main view" firstView="views.MainView"/> <s:ViewNavigator label="Online Rankings" 
firstView="views.RankingsOnline"/>
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 
</s:TabbedViewNavigatorApplication>

I tried setting the skin directly in the view using a SkinnableContainer. Components are visible in this way, but the image doesn't resize and is a lot larger / smaller  than the screen.

        <?xml version="1.0" encoding="utf-8"?> 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
 title="MainView" actionBarVisible="false" tabBarVisible="false" > 
 <s:SkinnableContainer skinClass="skins.CustomMainSkin" > <s:NavigatorContent id="gameBoard" > 
</s:NavigatorContent> 
<s:Group x="27" y="133" width="297" height="388"> 
<s:Button left="33" right="36" top="39" bottom="281" label="Start Game" horizontalCenter="-2"
 verticalCenter="-121" click="button1_clickHandler(event)"/> <s:Button x="34" y="146" width="228" 
label="Rankings" click="rankingsAction(event)"/> <s:Button x="32" y="252" width="228" label="Quit"/> 
</s:Group
> </s:SkinnableContainer>
 <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> 
 </s:View>

Can you please help me achieve this?

Thanks