Setting the background color on an invalid Spark Image control in Flex Hero

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-the-background-color-on-an-invalid-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_invalid_backgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Form>
            <s:FormItem label="source:">
                <s:layout>
                    <s:HorizontalLayout />
                </s:layout>
                <s:Button label="image1.jpg"
                        click="img.source = 'http://helpexamples.com/flash/images/image1.jpg';"
                        chromeColor="haloGreen" />
                <s:Button label="logo"
                        click="img.source = 'http://helpexamples.com/flash/images/logo.png';"
                        chromeColor="haloGreen" />
                <s:Button label="(404)"
                        click="img.source = 'http://helpexamples.com/flash/images/404.gif';"
                        chromeColor="red" />
                <s:Button label="(null)"
                        click="img.source = null;" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Image:ready {
            backgroundColor: haloGreen;
        }
        s|Image:invalid {
            backgroundColor: red;
        }
    </fx:Style>
 
    <s:Image id="img"
             width="200" height="200"
             horizontalCenter="0" verticalCenter="0" />
 
</s:Application>