The following example shows how you can set a background image and background size for a Flex VBox container by setting the backgroundImage, and backgroundSize styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/05/changing-a-vbox-containers-background-size-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
VBox {
backgroundImage: Embed("Fx.png");
backgroundColor: red;
}
</mx:Style>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="percentWidth:">
<mx:HSlider id="sliderW"
minimum="0"
maximum="100"
value="100"
liveDragging="true"
snapInterval="1"
tickInterval="10"
dataTipPrecision="0" />
</mx:FormItem>
<mx:FormItem label="percentHeight:">
<mx:HSlider id="sliderH"
minimum="0"
maximum="100"
value="100"
liveDragging="true"
snapInterval="1"
tickInterval="10"
dataTipPrecision="0" />
</mx:FormItem>
<mx:FormItem label="backgroundSize:">
<mx:ComboBox id="comboBox">
<mx:dataProvider>
<mx:Array>
<mx:Object label="auto" />
<mx:Object label="100%" />
<mx:Object label="90%" />
<mx:Object label="80%" />
<mx:Object label="70%" />
<mx:Object label="60%" />
<mx:Object label="50%" />
<mx:Object label="40%" />
<mx:Object label="30%" />
<mx:Object label="20%" />
<mx:Object label="10%" />
<mx:Object label="0%" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:HBox percentWidth="{sliderW.value}"
percentHeight="{sliderH.value}">
<mx:VBox backgroundSize="{comboBox.selectedItem.label}"
width="100%"
height="100%" />
</mx:HBox>
</mx:Application>
View source is enabled in the following example.
