blog
Setting background image position for a HBox / VBox in Flex
(April 24th, 2009 - 1:21AM)
If you're reading this, you're probably looking for a way to position a background image on your Flex VBox or HBox. So was I. I find it amazing that Flex doesn't support this out of the box.
There were a lot of solutions online, such as a very clever one that involves overriding createChildren (you can see it here). However, this is an awfully heavy (and potentially risky) solution for what should be a very simple problem.
I came up with a way of positioning my background images. It's not perfect, and it won't work in all situations, but it's relatively simple and will hopefully do the job until Adobe officially supports it.
Here's what I did. The example below adds a right-aligned background image (imgBadge) to the vbxDisplaying VBox.
<mx:VBox
id="vbxDisplaying"
width="100%"
>
<mx:HBox
id="hbxBadge"
width="{this.width-imgBadge.width}"
horizontalAlign="right"
verticalAlign="bottom"
includeInLayout="false"
>
<mx:Image
id="imgBadge"
source="@Embed('/images/rock_badge.png')"
/>
</mx:HBox>
<!-- some other elements here... -->
</mx:VBox>
Here's the end result. The rounded box is vbxDisplaying, and the Web 2.0 badge is imgBadge.
Basically, I'm using the includeInLayout property of the HBox/VBox to pull my image out of the flow of elements. I'm not using the backgroundImage property at all. For those who haven't used it before, includeInLayout allows you to create a visual element that doesn't push elements aside to make space; it can have an effect similar to absolute positioning in HTML.
By doing this, I'm spoofing a background image that's aligned to the right.
I know this isn't a perfectly elegant solution - it would be a lot nicer if this could be done through CSS - but it's a really easy fix and will hopefully be good enough for now.
permanent link - digg this post - 2 comments2 comments
Thanks! nice to know you from this page!
I've got an application where i need to put a background image (that is basically a banner) and all i could get to work was to display the image in the center or bottom of the page.
I can figure out why the backgroundImage property won't display the image at the top of the page without eventually changing the ratio.
Anyway, your little trick worked and i'll use it for the time being.
So thanx again