Question

We are trying to fill our Flex 3 applications background with an image pattern by repeating the pattern throughout the background.

The pattern is a very small “bulleted”-background.

The Flex App seems to just stretch the image pattern even though we’ve specified in the CSS the following:

Application
{
background-gradient-colors: #ffffff, #ffffff;
color: #000000;
background-image: Embed(source=”../assets/images/gray_bullet_background.png”);
background-repeat: repeat;
background-position: center;
background-blend: multiply;
…

Does anyone know what we might be missing here?

Thanks a lot,

FortPointUIGuy

Answer 1

Flex doesn’t support background-repeat so in order to do it you’ll need a custom skin such as the following:

package view.skin
{
    import flash.display.Bitmap;
    import mx.skins.ProgrammaticSkin;

    public class RepeatingImageSkin extends ProgrammaticSkin
    {
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            var cls:Object = getStyle("backgroundImage");
            var bmp:Bitmap = new cls();
            graphics.clear();
            graphics.beginBitmapFill(bmp.bitmapData);
            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
        }
    }
}

Then for your Application style, you can just have:

Application {
    background-image: Embed(source="../assets/images/gray_bullet_background.png");
    border-skin: ClassReference("view.skin.RepeatingImageSkin");
}