Set background image for Spark BorderContainer in flex 4


 

Set background image for Spark BorderContainer in flex 4

In this example you can see how to set background image for BorderContainer container in Flex 4. The BorderContainer container give property to set image as background in the BorderContainer content area.

In this example you can see how to set background image for BorderContainer container in Flex 4. The BorderContainer container give property to set image as background in the BorderContainer content area.

Set background image for Spark BorderContainer in flex 4 :-

In this example you can see how to set background image for BorderContainer  in Flex 4. The BorderContainer  has a property to set the image in background which is backgroundImage property.

Example:

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<s:BorderContainer

backgroundColor="0xE5CE5A"

cornerRadius="10"

borderStyle="inset"

borderWeight="4"

width="380"

height="174" x="1" y="0" backgroundImage="@Embed(source='file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg')">

<s:layout>

<s:VerticalLayout

paddingLeft="25"

paddingRight="5" paddingTop="25" paddingBottom="5"/>

</s:layout>

<mx:HBox width="341" height="38">

<s:Label text="User Name :"/>

<s:TextInput id="username" width="200" height="30"/>

</mx:HBox>

<mx:HBox width="346" height="38">

<s:Label text="Password :" width="72"/>

<s:TextInput id="password"

displayAsPassword="true" width="200" height="30"/>

</mx:HBox>

<mx:HBox width="346" horizontalAlign="center">

<s:Button label="Submit"/>

</mx:HBox>

</s:BorderContainer>

0

</s:Application>

we have use backgroundImage property to set background image and binding image with this property.

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

1

Download this code

Ads