Strange issue embedding backgroundImage via an external CSS file

programming flash
1

I ran into a very strange issue recently, trying to embed a container’s backgroundImage inside a CSS file.

First, I tried embedding directly in source code, and that worked:


;; Foo.as
;; This works, but is horribly hacky
public class Foo extends Box {
...[INDENT][Embed(source="foo.png")]
var c :Class;
 setStyle("backgroundImage", c); 
[/INDENT]...
}

But that’s not what I wanted - I’d rather embed the image in an external CSS file. So I tried this, and it didn’t work:


;; Foo.as
;; This doesn't work - but it looks like it should
public class Foo extends Canvas {
...[INDENT]styleName = "barStyle"; 
[/INDENT]...
}

;; Bar.css
.barStyle {[INDENT]backgroundImage = [Embed(source="foo.png")];
[/INDENT]}

This didn’t work at all - the background image came out empty. So after much experimentation, I finally arrived at this:


;; Foo.as
;; Works, hooray! But why?

[Style(name="backgroundSkin", type="Class", inherit="no")]
public class Foo extends Box 
{
...[INDENT]styleName = "barStyle";
...
var c :Class = getStyle("backgroundSkin");
setStyle("backgroundImage", c);
[/INDENT]...
}

;; Bar.css
.barStyle {[INDENT]backgroundSkin = [Embed(source="foo.png")];
[/INDENT]}

This last form finally works. But I’m completely mystified why it does, and the simple “backgroundImage = Embed…” didn’t.

Is there something magical that happens in the line “var c :Class = getStyle ()”, like a hidden type conversion? Or maybe it’s the “setStyle (“backgroundImage”, c)” that does something special? Any hints or tips would be appreciated. :slight_smile:

Edit: I’m using ActionScript 3 and Flex 2.01.