Flex 4如何将背景图像设置为VBox？

Question

I'm trying to use simple css rules as we do it in html to customize my app style but even simple

.VBoxStyle{
    background-image:Embed("images/background.png"); 
}

doesn't work. I read about many different situations based on old-new flex versions but couldn't understand anything. So how do you change simple container background-image in flex mx?

Answer 1

The problem is that Flex 4 components use the Spark theme to define their appearance by default and in this theme border hasn't backgroundImage property. But you can change theme to halo and it will works. To change theme write in the additional compiler arguments:

-theme=${flexlib}/themes/Halo/halo.swc

Answer 2

It can be done with any of the Flex 3 container classes (VBox, HBox, Canvas, etc).

I'm typing this on a phone, so instead of a working example I defer to this useful blog post from one of the Flex SDK QA Engineers:

http://blog.flexexamples.com/2008/01/05/changing-a-vbox-containers-background-image-attachment-in-flex/

That shows how to do it in MXML, but you should also be able to do it with CSS.

It's not clear why it's not working in your case. In Flex I tend not to use hyphens in style property names (backgroundImage instead of background-image).

Also, were you trying to apply that style to all VBox's? Or applying to specific VBox's with the styleName property?