Image object white background showing

I have an Image object that gets resized to the containers size when the image loads.
The images that it will load are dynamic in size so after resize I end up with a sliver of the image object's white background showing.

How can I make the Image object not have a white background and be transparent.
Parts of the PNG's have transparent parts but show up as white due to the white background of the object is it loaded into.

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" headerHeight="20" >

  <mx:Script>
    <![CDATA[
      public function set source( val:String ):void{
        this.img.source = val;
      }
      private function onLoad( e:Event ):void{
        // resize image on load to fit
        var scale:Number = (this.height - 38) / this.img.contentHeight; // 38 is adjustment for headheight and padding
        this.img.scaleX = scale;
        this.img.scaleY = scale;
      }
    ]]> 
  </mx:Script>

  <!-- how do I make this image object have a transparent background -->
  <mx:Image id="img" complete="onLoad(event)" />

</mx:Panel>

[EDIT] In the screen shot visible are 2 of the objects made from the code I posted above.
As you can see there is a white border.

and here is one of the PNGs

This png has a transparent 1 inch border at 350@PPI this is 72 PPI So a tad smaller

You can not see the the border here obviously but if you drag it to your desktop and open in photoshop you will see it

[EDIT]

As SuperSaiyen suggested I added backgroundColor="#000000" to the panel and I got this result. As you can see I got a black border now.

So i went ahead and added backgroundAlpha="0" along with backgroundColor="#000000" to the panel and got this.

So now I almost have it but there is still that bluish color around it. Its not quite 100% transparent yet.

I really have no idea why the panel background would change the image tag.

I guess some kind of inheritance from the paren开发者_StackOverflow社区t is going on.

Still need to get rid of the blue.

---

Instead of setting the scale, try this:

<mx:Image id="img" height="{this.height-38}" maintainAspectRatio="true" />

I attempted to recreate your issue, and even with the scale I did not see the white borders.

I have a black border because that is the background of the panel...

<mx:Panel id="thePanel" headerHeight="20"
              horizontalAlign="center" verticalAlign="middle"
              height="200" width="150"
              backgroundColor="#000000">

        <!-- how do I make this image object have a transparent background -->
        <mx:Image id="img" height="{thePanel.height-38}" maintainAspectRatio="true" />

    </mx:Panel>

Edit: So the background you're seeing is the background of the box behind the panel, not the image (see opaqueBackground prop on panel). What you want then is to set the background of the panel to be the same color as the borders of the panel. Is panel the right container to use? How about a HBox with roudned corners?

<mx:VBox id="thePanel" cornerRadius="4" backgroundColor="0xd1dbe9"
             horizontalAlign="center" verticalAlign="middle"
             height="200" width="150"
             paddingBottom="5" paddingLeft="5" paddingTop="5">
        <mx:Label text="Bind to title String" />
        <mx:Image id="img" width="100%" height="100%"/>
    </mx:VBox>