Setting background image in Flex 4.5

Question

I have written a custom skin in Flex 4.5, which shows a custom image. I want this to my background image, so how can I set this skin to the application container?

Thanks

Answer 1

You skin the application like any other component, the skinClass attribute of course: :)

How?

Here is my app.mxml:

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
    skinClass="MyAppSkin">      
</s:Application>

Now, here I make a simple skin with a background image stretched to fit!

Full source of my MyAppSkin.mxml file here (too big to post here): http://pastebin.com/Hwu9tc1Y

Here is the important part (only part really customized - rest is standard):

    <s:Group id="backgroundRect">
        <s:BitmapImage source="@Embed('beach.jpg')" left="0" right="0" top="0" bottom="0" scaleMode="stretch"/>
    </s:Group>

What happens when you apply a skin is that it searches for certain elements by id (backgroundRect being the one we're interested in) and applying them. To customize, simply change the parts of the skin you want. I replaced the standard background solid color fill with this group with an image.

Piece of cake sir!

Make sense?

Answer 2

How about this:

<s:BitmapImage source="@Embed('paper1.jpg')" 
  left="0" right="0"  
  width="100%" height="100%" 
/>

Answer 3

Set background image and add components

    <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <s:List>
            <s:ArrayCollection>
                <fx:String>One</fx:String>
                <fx:String>Two</fx:String>
                <fx:String>Three</fx:String>
                <fx:String>Four</fx:String>
                <fx:String>Five</fx:String>
            </s:ArrayCollection>
        </s:List>
    </mx:VBox>
</s:Group>