[flexcoders] How to make mx:Application transparent

[elevight]

Here's the code of my small application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical"
        width="540" height="45" horizontalScrollPolicy="off" 
verticalScrollPolicy="off"
        paddingTop="1" paddingBottom="0" paddingLeft="0" paddingRight="0" 
verticalAlign="middle">
        <mx:HBox horizontalAlign="left" backgroundAlpha="0">
                <mx:Label text="Login:"/>
                <mx:TextInput id="txtLogin" width="165" height="20" 
maxChars="25"/>
                <mx:Label text="Password:"/>
                <mx:TextInput id="txtPassword" width="165" height="20" 
maxChars="25" displayAsPassword="true"/>
                <mx:Button id="btnSubmit" label="Submit" width="70"/>
        </mx:HBox>
        <mx:HBox horizontalAlign="center" backgroundAlpha="0">
                <mx:Text text="This is a test message of an error." 
color="0xff0000" fontWeight="bold"/>
        </mx:HBox>
</mx:Application>

When the above application is run, I get this default blue background that all 
Flex applications start with. I want to make it transparent so that whatever my 
Flex application is sitting on in my web page would show instead.

I've tried setting the backgroundAlpha of the mx:Application to zero but have 
had no effect.

Anybody have any suggestions on how to do this? Thanks.