Note : Same post as previous one.
Folks,
Today, I come to know another one Gem of Flex.
A need arise in my one project, while my development,
I have to create same functionality as done in HTML.
i.e. HTML – Body tag we provide backGround image with size ” fixed “.
<body style=”background:url(images/background.png) fixed”>
So, when ever we scroll the contents,
the background image will not be scrolling, only contents will scroll.
Same type functionality, I need to achieve in flex.
So I dwell deep into Flex frame work and got one more Pearl…!!! Oh, that’s consistent.
That’s why I like flex more than oteher tech.
This time, the pearl is, style property : backgroundAttachment
The ” backgroundAttachment ” is of mx.core.Container class style property.
If a background image is specified, this style specifies
whether it is fixed with regard to the viewport (<code>”fixed”</code>)
or scrolls along with the content (<code>”scroll”</code>).
[Style(name=”backgroundAttachment”, type=”String”, inherit=”no”)]
My sample is as below :
I have shown an exmple with two VBox all propertis and contets are same.
Except one propety :
backgroundAttachment=”scroll“
backgroundAttachment=”fiexed”
the code is as below
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" <span> </span>pageTitle="Mayur : BG Experiment" <span> </span>width="550" height="330" <span> </span>backgroundImage="assets/main_gradient.png"> <span> </span><mx:VBox width="160" height="170" verticalGap="10" <span> </span>x="52" y="104" <span> </span>paddingLeft="5" <span> </span>themeColor="haloBlue" <span> </span>borderStyle="solid" borderThickness="2" <span> </span>toolTip="Scroll - default value" <span> </span>backgroundImage="assets/main_bg.png" <span> </span>backgroundAttachment="scroll"> <span> </span><mx:Text text="One Long line 1" /> <span> </span><mx:Text text="One Long line 2" /> <span> </span><mx:Text text="One Long line 3" /> <span> </span><mx:Text text="One Long line 4" /> <span> </span><mx:Text text="One Long line 5" /> <span> </span><mx:Text text="One Long line 6" /> <span> </span><mx:Text text="One Long line 7" /> <span> </span><mx:Text text="One Long line 8" /> <span> </span><mx:Text text="One Long line 9" /> <span> </span><mx:Text text="One Long line 10" /> <span> </span><mx:Text text="One Long line 11" /> <span> </span><mx:Text text="One Long line 12" /> <span> </span><mx:Text text="One Long line 13" /> <span> </span><mx:Text text="One Long line 14" /> <span> </span><mx:Text text="One Long line 15" /> <span> </span></mx:VBox> <span> </span><mx:VBox width="160" height="170" verticalGap="10" <span> </span>x="334" y="104" <span> </span>paddingLeft="5" <span> </span>themeColor="haloBlue" <span> </span>borderStyle="solid" borderThickness="2" <span> </span>toolTip="fixed - changed value" <span> </span>backgroundImage="assets/main_bg.png" <span> </span>backgroundAttachment="fixed"> <span> </span><mx:Text text="One Long line 1" /> <span> </span><mx:Text text="One Long line 2" /> <span> </span><mx:Text text="One Long line 3" /> <span> </span><mx:Text text="One Long line 4" /> <span> </span><mx:Text text="One Long line 5" /> <span> </span><mx:Text text="One Long line 6" /> <span> </span><mx:Text text="One Long line 7" /> <span> </span><mx:Text text="One Long line 8" /> <span> </span><mx:Text text="One Long line 9" /> <span> </span><mx:Text text="One Long line 10" /> <span> </span><mx:Text text="One Long line 11" /> <span> </span><mx:Text text="One Long line 12" /> <span> </span><mx:Text text="One Long line 13" /> <span> </span><mx:Text text="One Long line 14" /> <span> </span><mx:Text text="One Long line 15" /> <span> </span></mx:VBox> <span> </span><mx:Grid x="52" y="54" width="440" > <span> </span><mx:GridRow width="100%" height="100%"> <span> </span><mx:GridItem width="100%" height="100%" <span> </span>borderStyle="solid" borderThickness="1"> <span> </span><mx:Label text="backgroundImage="main_bg.png"" width="205"/> <span> </span></mx:GridItem> <span> </span><mx:GridItem width="100%" height="100%" <span> </span>borderStyle="solid" borderThickness="1"> <span> </span><mx:Label text="backgroundImage="main_bg.png"" width="100%"/> <span> </span></mx:GridItem> <span> </span></mx:GridRow> <span> </span><mx:GridRow width="100%" height="100%"> <span> </span><mx:GridItem width="100%" height="100%" <span> </span>borderStyle="solid" borderThickness="1"> <span> </span><mx:Label text="backgroundAttachment="scroll"" width="205"/> <span> </span></mx:GridItem> <span> </span><mx:GridItem width="100%" height="100%" <span> </span>borderStyle="solid" borderThickness="1"> <span> </span><mx:Label text="backgroundAttachment="fixed"" width="100%"/> <span> </span></mx:GridItem> <span> </span></mx:GridRow> <span> </span></mx:Grid> <span> </span><mx:Label x="20" y="25" <span> </span>text="mx.core.Container-[Style(name="backgroundAttachment", type="String", inherit="no")]" <span> </span>width="500"/> </mx:Application>
Please let me know your views / comments.
Happy Felxing . . . 
Filed under: Actionscript 3, Flex 3 | Tagged: Actionscript 3, Flex 3 |
Flexair - Mayur Rami 
thanks a lot.
hi
thank u for the information, i personallay prefer flex and i like its background-attachment property.
.containerVBox {
…………..
……
🙂
Oo, i will try it…..
hi
a good information. Note 1 thank you