Making background image to center in Flex 4

Question

CustomAppSkin Class

    <?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
        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" fillMode="clip" horizontalCenter="0" verticalCenter="0" 
                   source="@Embed('assets/images/bg_with_Steps.png')"
                   smooth="true" 
                   left="0" right="0"
                   top="0" bottom="0" />


</s:Skin>

How can i align center the background image. This code is in my Skin class. My Main class....

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Application_skinClass_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               skinClass="CustomAppSkin">
    <s:layout>
        <s:VerticalLayout 
            horizontalAlign="center"
            verticalAlign="middle"/>
    </s:layout>

</s:Application>

Answer 1

Try updating your CustomAppSkin to:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
        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:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
        <s:BitmapImage id="img" fillMode="clip" horizontalCenter="0" verticalCenter="0" 
                       source="@Embed('assets/images/bg_with_Steps.png')"
                       smooth="true" 
                       left="0" right="0"
                       top="0" bottom="0" />
    </s:HGroup>
</s:Skin>