Set Application backgroundImage in flex 4.6

Question

I am trying to set BackgroundImage of application in flex 4.6 By Creating Skin of Application.

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
    [HostComponent("spark.components.Application")]
</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
    <s:State name="normalWithControlBar" />
    <s:State name="disabledWithControlBar" />
</s:states>

<s:Group id="backgroundRect" width="100%" height="100%">
    <s:layout>
        <s:VerticalLayout gap="0" horizontalAlign="justify" />
    </s:layout>

    <s:BitmapImage source="@Embed('assets/css/1.jpg')" left="0" right="0" top="0" bottom="0" scaleMode="stretch"/>
</s:Group>  
</s:Skin>

It Display Background Image.but if i put any Component/Container in application then that Component/Container not Display on Application. Once i remove skin then only that Component/Container Display on Application.

Answer 1

Your custom skin does not have a Group called "contentGroup"

This is where Flex usually puts in all mxml-added components that should be displayed in a container.

Try adding:

<s:Group id='contentGroup' width='100%' height='100%' />

to your skin.

I think that will do.

In general it's often easier to take a copy of the original skin file and alter things in there rather than writing a new one. This way, you make sure, you don't forget anything important.