Question : setting flex background image

How can I set the main background of flex to an image that fills the entire background and scales when the window is resized

Answer : setting flex background image

You can use attached skin class for repeated background image.

Use this class in Application (Border skin) as below:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" borderSkin ="skins.ApplicationBackground" ........ />

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:

           
           
             ============================
ApplicationBackground.as
============================
package skins
{
import flash.display.Bitmap;
import flash.display.BitmapData;

import flash.display.Graphics;
import mx.skins.ProgrammaticSkin;
import mx.utils.ColorUtil;

/**
 *  The skin for application background gradient.
 */
public class ApplicationBackground extends ProgrammaticSkin
{
    [ Embed( source='../assets/bg.png' ) ]
	private var backgroundImageClass :Class;
	private var backgroundImage :Bitmap;
	private var backgroundBitmapData :BitmapData;
    //--------------------------------------------------------------------------
    //
    //  Constructor
    //
    //--------------------------------------------------------------------------

    /**
     *  Constructor	 
     */
    public function ApplicationBackground()
    {
        super(); 
        backgroundImage = new backgroundImageClass();
		backgroundBitmapData = new BitmapData( backgroundImage.width, backgroundImage.height );
		backgroundBitmapData.draw( backgroundImage );            
    }

    //--------------------------------------------------------------------------
    //
    //  Overridden properties
    //
    //--------------------------------------------------------------------------

    //----------------------------------
	//  measuredWidth
    //----------------------------------
    
    /**
     *  @private
     */    
    override public function get measuredWidth():Number
    {
        return 8;
    }
    
    //----------------------------------
	//  measuredHeight
    //----------------------------------
    
    /**
     *  @private
     */        
    override public function get measuredHeight():Number
    {
        return 8;
    }
    
    //--------------------------------------------------------------------------
    //
    //  Overridden methods
    //
    //--------------------------------------------------------------------------

    /**
     *  @private
     */    
	override protected function updateDisplayList(w:Number, h:Number):void
    {
		super.updateDisplayList(w, h);
		
		var g:Graphics = graphics;
		g.clear();
		g.beginBitmapFill( backgroundBitmapData );
		g.drawRect(0,0,w,h);
		g.endFill();
		g.beginFill(0xffffff, 0);
		g.lineStyle(1, 0x596873);
		g.drawRect(1, 1, w - 2, h - 2);
    }
}

}
===========================

           
         