[flexcoders] Re: Flex 4 & CSS

[Netaman]

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 flexcoders@yahoogroups.com, "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: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On
> Behalf Of valdhor
> Sent: Friday, August 19, 2011 1:59 PM
> To: flexcoders@yahoogroups.com
> 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>
>