I've been playing around with an adobe air application I am building and I was trying to make a background image repeat in flex just like it does in html.

I though this would be relatively easy but it turns out its not that simple. In the they achieve repeating backgrounds using a backgrounds.swf file, however I can't seem to find any info or source on how to customise this so I discovered another solution... DEGRAFA!

Degrafa is a graphic framework for flex3. It is incrediblypowerful and has so many features but Im not going to cover that at all, though if you want to learn more visit the degrafa site and look at the samples and tutorials.

To get a background image to repeat using degrafa is simple.

Step 1... visit degrafa and download the latest version of the swc.

Step 2... unpack the zip and place the degrafa swc file in your projects lib folder.

Step 3... Add the following css to your projects css file, or inside a style tag if you dont have a css file.

Application {    
    background-image:   Embed("assets/images/the_image_goes_here.png");
    background-repeat:   repeat;
    background-position: center;
    background-blend:    multiply;
    borderSkin:              ClassReference("com.degrafa.skins.CSSSkin");
} 

Step 4... Run and rejoice because degrafa is going to make you fall in love with flex all over again!