Setting a background image on a Spark Application in Flex 4

The following example shows how you can add a background image to a Flex 4 Spark Application by creating a custom skin with a BitmapGraphic and setting the skinClass style in MXML, CSS, or ActionScript.
Full code after the jump.
 
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/22/setting-a-background-image-on-an-fxapplication-in-flex-gumbo/ -->
<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="skins.CustomApplicationSkin">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <s:RichEditableText id="sdkVer"
            editable="false"
            textAlign="center"
            fontSize="72"
            horizontalCenter="0"
            verticalCenter="0"
            width="100%"
            initialize="sdkVer.text = mx_internal::VERSION;" />
 
</s:Application>

The custom skin class, skins/CustomApplicationSkin.mxml, is as follows:
View skins/CustomApplicationSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/22/setting-a-background-image-on-an-fxapplication-in-flex-gumbo/ -->
<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"
            source="@Embed('image1.jpg')"
            resizeMode="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>

You can also set the skinClass style in an external .CSS file or