custom StaticImage problem

I want to add a background on custom StaticImage.
But I find the MainSkin's area must be empty if you want to show your image.
Whether is it an obligatory set or not?
Or it is my problem?
my skin:

<!--Game/StaticImageBack1-->
<Resource type="ResourceSkin" name = "Game/StaticImageBack1" size = "21 21" texture = "#{SanGuo_Theme_Texture}" >

<BasisSkin type="SubSkin" offset = "0 0 4 4" align = "Left Top">
<State name="normal" offset = "0 0 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "4 0 13 4" align = "HStretch Top">
<State name="normal" offset = "4 0 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "17 0 4 4" align = "Right Top">
<State name="normal" offset = "17 0 4 4"/>
</BasisSkin>

<BasisSkin type="SubSkin" offset = "0 4 4 13" align = "Left VStretch">
<State name="normal" offset = "0 4 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "4 4 13 13" align = "HStretch VStretch">
<State name="normal" offset = "4 4 13 13"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "17 4 4 13" align = "Right VStretch">
<State name="normal" offset = "17 4 4 4"/>
</BasisSkin>

<BasisSkin type="SubSkin" offset = "0 17 4 4" align = "Left Bottom">
<State name="normal" offset = "0 17 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "4 17 13 4" align = "HStretch Bottom">
<State name="normal" offset = "4 17 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "17 17 4 4" align = "Right Bottom">
<State name="normal" offset = "17 17 4 4"/>
</BasisSkin>
</Resource>

<!--Game/StaticImageBack2-->
<Resource type="ResourceSkin" name = "Game/StaticImageBack2" size = "21 21" texture = "#{SanGuo_Theme_Texture}" >

<BasisSkin type="SubSkin" offset = "0 0 4 4" align = "Left Top">
<State name="normal" offset = "0 0 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "4 0 13 4" align = "HStretch Top">
<State name="normal" offset = "4 0 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "17 0 4 4" align = "Right Top">
<State name="normal" offset = "17 0 4 4"/>
</BasisSkin>

<BasisSkin type="SubSkin" offset = "0 4 4 13" align = "Left VStretch">
<State name="normal" offset = "0 4 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "17 4 4 13" align = "Right VStretch">
<State name="normal" offset = "17 4 4 4"/>
</BasisSkin>

<BasisSkin type="SubSkin" offset = "0 17 4 4" align = "Left Bottom">
<State name="normal" offset = "0 17 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "4 17 13 4" align = "HStretch Bottom">
<State name="normal" offset = "4 17 4 4"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset = "17 17 4 4" align = "Right Bottom">
<State name="normal" offset = "17 17 4 4"/>
</BasisSkin>
</Resource>

<!--Game/StaticImageStyle01-->
<Resource type="ResourceSkin" name = "Game/StaticImageStyle01" size = "21 21">
<Child type="Widget" skin="Game/StaticImageBack1" offset = "0 0 21 21" align = "Stretch" name = "Back"/>
<BasisSkin type="MainSkin" offset = "4 4 13 13" align = "Stretch"/>
</Resource>

<!--Game/StaticImageStyle02-->
<Resource type="ResourceSkin" name = "Game/StaticImageStyle02" size = "21 21" texture = "#{SanGuo_Theme_Texture}" >
<Child type="Widget" skin="Game/StaticImageBack2" offset = "0 0 21 21" align = "Stretch" name = "Back"/>
<BasisSkin type="MainSkin" offset = "4 4 13 13" align = "Stretch"/>
</Resource>

my layout:

<Widget type="StaticImage" skin="StaticImage" position="210 10 40 40" layer="Back" name="image1">
<Property key="Image_Resource" value="pic_InofGold"/>
</Widget>
<Widget type="StaticImage" skin="Game/StaticImageStyle01" position="255 10 40 40" layer="Back" name="image2">
<Property key="Image_Resource" value="pic_InofGold"/>
</Widget>
<Widget type="StaticImage" skin="Game/StaticImageStyle02" position="300 10 40 40" layer="Back" name="image3">
<Property key="Image_Resource" value="pic_InofGold"/>
</Widget>

screenshot intro:
imgae.JPG // the effect in ogre window
ok.jpg // the effect in my mind
myResource.JPG // resource image,just SanGuo_Theme_Texture

What it is necessary to receive as a result?

There are 3 images in imgae.JPG.
The second image is not correct.
His layout is:

<Widget type="StaticImage" skin="Game/StaticImageStyle01" position="255 10 40 40" layer="Back" name="image2">
<Property key="Image_Resource" value="pic_InofGold"/>
</Widget>

You see.The Gold Image does not show.
I edit "Game/StaticImageStyle01" to "Game/StaticImageStyle02" .
You see.The differentia is just that I take out :

<BasisSkin type="SubSkin" offset = "4 4 13 13" align = "HStretch VStretch">
<State name="normal" offset = "4 4 13 13"/>
</BasisSkin>

The result is the third image.
You can see the area around the Gold Image is transparent.
So I want to know whether it can make it not transparent or not.

use simple widget for background and child static image for foreground.

Oh，maybe I'm so greedy that I asked this problem.
Forget it.