Transparent Background Image in Flex

Here is a quick tip for setting a transparent image as the background of your Flex application. If you want that transparency to pass through to the HTML page you would set your wmode to “transparent.” But even after you set your transparent background image you’ll notice that default blue background still shows through. And yu can’t set the backgroundAlpha to 0 since that would also hide your background image. What you need to know is that the backgroundColor is defaulted to that blue color, so you must set the backgroundColor to undefined so your application has no background color:

1
2
3
4
Application {
    backgroundImage: Embed(source="/assets/Background.png");
    backgroundColor: undefined;
}

3 thoughts on “Transparent Background Image in Flex

  1. mce

    I am totally new to Flex, Flasbuilder, etc. and almost new to programming. Can you tell me specifically where this code is placed? thanks

    Reply
  2. Robert

    Seems like it would be less hacky to simply have a canvas sitting on top of your app with its background as the transparent png, then make your application’s background alpha 0.

    Reply