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


Tags: css,flex4,mxml,flex-spark

Problem :

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?



Solution :

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.


    CSS Howto..

    php css how to change name color based on membership?

    How to wrap table cell at a maximum width in full width table

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    Sencha Touch 2: How to handle custom css files while production build?

    How to control the area of background so it only makes a limited area has color other area don't?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    How to - dynamically - change link text color in jQuery Mobile?

    CSS visited links- how to recognize visited links which visited by clicking through my app?

    How to make a div fill the remaning vertical space using css

    How to dynamically set and modify CSS in JavaScript?

    How to put div block into right screen area using css?

    How to replace default controls with custom buttons in Fancybox 2.1.5?

    How to use CSS in html table inside javascript

    How to remove a div with fade out effect in JavaScript?

    How to replace HTML text with images using CSS content cross browser

    How to make a div to fit all available width even hidden with scroll?

    How to change css class for the inputfield and label when validation fails?

    How to change the CSS for all elements with a common identifier using Javascript?

    How to make an external HTML file not appear in the home page?

    How to display a div at the center of viewport?

    How to apply css for only second occurance

    How do I make a class/div behave like it were floating?

    How can I set first element to display: none;?

    How to make application browser compatible

    CSS form with side by side fields…how to align the labels and fields vertically?

    How to wrap a DIV around a DIV with CSS

    How to apply CSS to Selected One in Meteor?

    How to center align social media tags using HTML and CSS

    CSS - How to Style a Selected Radio Buttons Label?

    how to apply css in angular.js