Have you tried; This is using flex 4, the following workaround;
Where the image would be the same size as the container
<mx:Image id="backgroundImage" styleName="backgroundImage"
alpha=".8" source="{backgroundImage.getStyle('source')}"
maintainAspectRatio="false"/>
then in the CSS, you add the following;
mx|Image.backgroundImage{
source: Embed("/assets/images/someimage.png");
width:580;
height:246;
x:114;
y:161;
border: 1px green solid;
}
You can extend bordercontainer and add code to handle a style change;
public override function styleChanged(styleProp:String):void {
// code to handle element properties and not just styles
// such as x, y, height and width handled in css
}
If you need code example, then just write back to me and I will supply with
what you need, as time permits.
--- In [email protected], "Davidson, Jerry" <jerry.davidson@...> wrote:
>
> I tried both BorderContainer and Panel, but neither would display an
> image. I can get the background color to change, but not add an image.
>
>
>
> Perhaps a skin will work, but I can't get it to work so far. I've
> replaced the two lines of CSS with the default class "panel skin" which
> is over 300 lines long, includes three overrides and other methods and
> still doesn't seem to have an ability to add an image.
>
>
>
> Who would have guessed a simple image would bring Flex to its knees?
>
>
>
>
>
>
>
> From: [email protected] [mailto:[email protected]] On
> Behalf Of valdhor
> Sent: Friday, August 19, 2011 1:59 PM
> To: [email protected]
> Subject: [flexcoders] Re: Flex 4 & CSS
>
>
>
>
>
> Instead of using mx:Canvas try using s:BorderContainer.
>
> <?xml version="1.0" encoding="utf-8"?>
>
> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
>
> xmlns:s="library://ns.adobe.com/flex/spark"
>
> xmlns:mx="library://ns.adobe.com/flex/mx">
>
>
>
> <fx:Style>
>
> .bgImage
>
> {
>
> color: #DEDACF;
>
> contentBackgroundColor: #DEDACF;
>
> backgroundImage: Embed(BannerBackground.jpg);
>
> backgroundImageFillMode: repeat;
>
> }
>
> </fx:Style>
>
>
>
> <s:BorderContainer width="100%" height="600" styleName="bgImage">
>
> <s:Label text="CSS Background test" />
>
> </s:BorderContainer>
>
>
>
> </s:Application>
>
