How to set backgroundImage property in css file in flex 4?

Question

I want to set backgroundImage property to something like "../img/foo.png" in flex. My code looks like this:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .bg {
        background-image           : "../img/foo.png";
        background-image-fill-mode : repeat;
    }
</fx:Style>

<s:BorderContainer width="200" height="200" styleName="bg" />

It doesn't work. I don't want to use embeded image, so

background-image : Embed("../img/foo.png");

works but doesn't suit me. Is there any way to achieve it?

Answer 1

The BorderContainerSkin is not expecting a URL for the background image.

If you look at the skin, it uses a BitmapFill class for the background image. The skin takes whatever you've specified as the background-image and sets that as the source of the BitmapFill that is used for the actual background of the container.

As the docs (that I linked to above) indicate, the source of that BitmapFill can be one of the following:

• A Bitmap or BitmapData instance.
• A class representing a subclass of DisplayObject. The BitmapFill instantiates the class and creates a bitmap rendering of it.
• An instance of a DisplayObject. The BitmapFill copies it into a Bitmap for filling.

So, if you don't want to embed the image, then you need to load the image manually and provide that bitmap data as the value to the CSS style. Or create your own skin that uses an <s:Image /> component as the background.

To use the default skin, you could do something like this:

• use a Loader to load the image
• when loading is complete, get the bitmap data from the loaded content
• apply that as background-image

The steps to do the loading and get the bitmap data are detailed in this answer.

PS: since you'll be doing this in code, you probably cannot use a CSS style to set the background. You'll have to set it in Actionscript using the setStyle() method:

borderContainer.setStyle("backgroundImage", loadedBitmapData);

Note that while you can use the hyphenated style name in Flex CSS, in code you cannot refer to the hyphenated style name and need to use camel case as I've done above.