bg change

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:Style>
.containerVBox {
backgroundColor: white;
borderThickness: 1;
borderColor: black;
borderStyle: solid;
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
}
</mx:Style>

<mx:String id="lorem" source="lorem.txt" />

<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="backgroundAttachment:">
<mx:ComboBox id="comboBox">
<mx:dataProvider>
<mx:Array>
<mx:Object label="scroll" />
<mx:Object label="fixed" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>

<mx:VBox styleName="containerVBox">
<mx:VBox id="vBox"
backgroundImage="@Embed('Fx2.png')"
backgroundAttachment="{comboBox.selectedItem.label}"
width="500"
height="250">
<mx:Text width="100%" text="{lorem}" />
</mx:VBox>
</mx:VBox>

</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <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>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Style>
        .containerVBox {
            backgroundColor: haloBlue;
            borderThickness: 1;
            borderColor: black;
            borderStyle: solid;
            paddingLeft: 5;
            paddingRight: 5;
            paddingTop: 5;
            paddingBottom: 5;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("Fx.png")]
            private var flexLogo:Class;

            private function backImage_change(evt:Event):void {
                if (backImage.selected) {
                    vBox.setStyle("backgroundImage", flexLogo);
                } else {
                    vBox.setStyle("backgroundImage", null);
                }
            }

            private function backColor_change(evt:Event):void {
                if (backColor.selected) {
                    vBox.setStyle("backgroundColor", colorPicker.selectedColor);
                } else {
                    vBox.setStyle("backgroundColor", null);
                }
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        liveDragging="true"
                        tickInterval="0.1" />
            </mx:FormItem>
            <mx:FormItem label="show backgroundImage:">
                <mx:CheckBox id="backImage"
                        selected="true"
                        change="backImage_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="show backgroundColor:">
                <mx:CheckBox id="backColor"
                        selected="true"
                        change="backColor_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        enabled="{backColor.selected}"
                        change="backColor_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VBox styleName="containerVBox">
        <mx:VBox id="vBox"
                backgroundImage="{flexLogo}"
                backgroundAlpha="{slider.value}"
                backgroundColor="white"
                backgroundAttachment="fixed"
                width="500"
                height="250">
            <mx:Text width="100%" text="{lorem}" />
        </mx:VBox>
    </mx:VBox>

</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.myflexhero.com/share/flex-hero-flex4/flex-hero-components/flex-hero-layout/flex-hero-application/757 -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   viewSourceURL="srcview/index.html" creationComplete="init()">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>


	<fx:Script>
		<![CDATA[
			import mx.core.UIComponent;

			import spark.components.DropDownList;
			import spark.events.IndexChangeEvent;

			private var skinsLoader:Loader;
			private var defaultSkinSrc:String = 'bg.jpg';
			private var skinUi:UIComponent = null;

			private function init():void
			{
				imgLoader(defaultSkinSrc);
			}

			protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void
			{
				imgLoader(DropDownList(event.currentTarget).selectedItem);
			}

			public function imgLoader(imgPath:String):void
			{
				skinsLoader = new Loader;
				skinsLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,imgLoaderComplete);
				skinsLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,imgIOErrorHandler);
				var urlRequest:URLRequest = new URLRequest();
				urlRequest.url = "assets/"+imgPath;
				skinsLoader.load(urlRequest);
			}

			private function imgLoaderComplete(event:Event):void
			{
				var bitmap:Bitmap = event.target.content as Bitmap;
				bitmap.width = stage.stageWidth, bitmap.height = stage.stageHeight;
				if(skinUi)
				{
					removeElement(skinUi);
					skinUi = null;
				}
				skinUi = new UIComponent();
				skinUi.addChild(bitmap);
				addElementAt(skinUi,0);

				//-------------------
				skinsLoader.contentLoaderInfo.removeEventListener (Event.COMPLETE , imgLoaderComplete);
				skinsLoader.contentLoaderInfo.removeEventListener (IOErrorEvent.IO_ERROR , imgIOErrorHandler);
				skinsLoader = null;
			}
			private function imgIOErrorHandler(event:IOErrorEvent):void
			{
				trace(event.text);
			}

		]]>
	</fx:Script>
<s:DropDownList change="">

</s:DropDownList>
</s:Application>