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.

Answer 2

Here my app skin with a gradient background:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        alpha.disabledWithControlBar="0.5"
        alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        <![CDATA[
            import flash.filters.DropShadowFilter;

            private static const W:uint = 700;
            private static const H:uint = 525;

            private static const COLORS:Array = [0xFFFFFF, 0xFFFFFF];
            private static const ALPHAS:Array = [1, 0];
            private static const RATIOS:Array = [0, 255];
            private static const SHADOW:Array = [new DropShadowFilter(0, 0, 0x000000, 1.0, 12.0, 12.0, 1.0, 3, true)];

            private var _matrix:Matrix = new Matrix();

            private function drawBG(w:Number, h:Number):void {
                _bgShading.graphics.clear();
                _matrix.createGradientBox(w * 1.2, h * 2.2, 0, -w * 0.1, -h * 0.8);
                _bgShading.graphics.beginGradientFill(GradientType.RADIAL,
                    COLORS,
                    ALPHAS,
                    RATIOS,
                    _matrix,
                    SpreadMethod.PAD,
                    InterpolationMethod.LINEAR_RGB,
                    0);
                _bgShading.graphics.drawRect(0, 0, w, h);
                _bgShading.graphics.endFill();

                _bgShading.filters = SHADOW;

                _bgTexture.graphics.clear();
                _bgTexture.graphics.beginFill(0x99CC99);
                _bgTexture.graphics.drawRect(0, 0, w, h);
                _bgTexture.graphics.endFill();

                _bgShading.blendMode = BlendMode.OVERLAY;
            }        

            public function setBackgroundSize(w:uint=W, h:uint=H):void {
                var screenRatio:Number = w / h;
                var stageRatio:Number = stage.stageWidth / stage.stageHeight;
                var ratio:Number = screenRatio / stageRatio;

                // ratio > 1 if screen is broader than stage
                mainGroup.width = stage.stageWidth * Math.max(1, ratio);

                drawBG(mainGroup.width, H);
            }

            public function showBackground(b:Boolean):void {
                _bgTexture.visible = b;
                _bgShading.visible = b;
            }
        ]]>
    </fx:Script>

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

    <mx:UIComponent id="_bgTexture" />
    <mx:UIComponent id="_bgShading" />

    <s:Group id="mainGroup" x="0" y="0" width="700" height="525">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>

        <s:Group id="contentGroup" width="700" height="100%" minWidth="0" minHeight="0" />

        <s:Group id="topGroup" minWidth="0" minHeight="0"
                    includeIn="normalWithControlBar, disabledWithControlBar" >

            <s:Rect left="1" right="1" top="1" bottom="1" >
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="#66BBEE" />
                        <s:GradientEntry color="#3399CC" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>

            <s:Rect left="2" right="2" bottom="0" height="1" alpha="0.5">
                <s:fill>
                    <s:SolidColor color="#333333" />
                </s:fill>
            </s:Rect>

            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="6" paddingRight="6" paddingTop="6" paddingBottom="6" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>

    </s:Group>
</s:Skin>