Fixed Background Image In Flex

It seems like it would be easy. A large background image in the back of your flex app that doesn’t stretch the entire width and height of your browser. Unfortunately the CSS control of the current version of Flex does allow for the positioning of the background.

You can’t drop it in a Box and position the box in the Application because the size of the browser then adjusts to the size of the full image.

So how do you do it? Here’s a quick solution I found to have a large background horizontally centered and vertically aligned to the top of the page.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
backgroundColor="#000000">

<!-- This is my large image, change it to your image -->

<mx:Image source="Assets/Images/Andromeda.jpg" includeInLayout="false"/>

<!-- Add your UI here -->

</mx:Application>

I haven’t had time to find a simple solution for aligning the image to the bottom, left or right. Feel free to post one if you have one.

UPDATE

I’ve had some issues with the background image set to “includeInLayout=’false’” displaying consistently when creation is complete — especially when using effects and transitions. Here is my solution:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="init();" backgroundColor="#000000">

	<mx:Script>
		<![CDATA[
			private function init():void {
				bigBackground.includeInLayout = false;
				bigBackground.visible = true;
			}
		]]>
	</mx:Script>

	<mx:Image id="bigBackground" source="Assets/Images/Andromeda.jpg" visible="false"/>
	<!-- Add your UI here -->

</mx:Application>