Background Image in Flex

Question

I'm using Flash Builder 4 to create an application. I need to set an background image for the app. I've pulled through the data from XML.

I am using an <mx:Image> for the background-image. But I need elements to then be added inside it. How do I achieve this? I considered using Layers, but dont know how you achieve this.

Any help appreciated.

Cheers

Answer 1

One approach: in our flex application, we have a canvas behind our primary container as in

<mx:Canvas id="bgImg" width="1280" height="800"
           backgroundImage="assets/background.jpg" />
<containers:FlashContainer id="mainContainer">
<!-- HBoxs, VBoxes and loads of other components -->
</containers:FlashContainer>

So, the other elements you're looking to add would exist within the internal container with a stationary Canvas "behind" it, which holds your image.

To get this to work in Flex 4 you need to compile with the Halo theme (instead of Spark). We use flex builder and set the following flag under the project compiler preferences.

-theme=${flexlib}/themes/Halo/halo.swc

As in the following image:

Answer 2

In the Flex 3 Model, you can set a backgroundImage on the Application tag, which should, effectively, give your whole application a background image.

In the Flex 4 Model, you need to create a custom skin class for your Application tag. Set the skin using the skinClass style. Since s:Application extends SkinnableContainer, you should be able to use the default SkinnableContainer style as a guide for adding a background image. The default background, I believe, is just a Rect w/ a solid fill.

Answer 3

im still working in flex3, so i would have used backgroundImage on the application tag, and also do set backgroundSize to 100%, these 2 properties r on the application tag,

may be some help 2 u

tc