Instead of using mx:Canvas try using s:BorderContainer.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style>
.bgImage
{
color: #DEDACF;
contentBackgroundColor: #DEDACF;
backgroundImage: Embed(BannerBackground.jpg);
backgroundImageFillMode: repeat;
}
</fx:Style>
<s:BorderContainer width="100%" height="600" styleName="bgImage">
<s:Label text="CSS Background test" />
</s:BorderContainer>
</s:Application>
--- In [email protected], "Davidson, Jerry"
<jerry.davidson@...> wrote:
>
> Alex, you might be "Flex harUI" in the other forum. But I'm going to
> ask the question here as no one there seems to know the answer.
>
>
>
> I'm trying to convert a Flex 3 application to Flex 4. I find CSS
isn't
> working under Flex 4 as it did before. What I want to do is set a
back
> ground image on a canvas object. Here is that object:
>
> <mx:Canvas
>
> xmlns:mx="http://www.adobe.com/2006/mxml";
>
> xmlns:s="library://ns.adobe.com/flex/spark"
>
> styleName="bgImage"
>
> backgroundColor="#DEDACF"
>
> borderColor="#DEDACF"
>
> width="100%"
>
> horizontalScrollPolicy="off" verticalScrollPolicy="off">
>
>
>
> Here is "bgImage":
>
> .bgImage {
>
> /* background-image: "/src/images/BannerBackground.jpg"; */
>
> /* background-image: "src/images/BannerBackground.jpg"; */
>
> /* background-image: "images/BannerBackground.jpg"; */
>
> /* background-image: "/images/BannerBackground.jpg"; */
>
> /* background-image: "../images/BannerBackground.jpg"; */
>
> /* background-image: "../BannerBackground.jpg"; */
>
> /* background-image: "FSCalc/images/BannerBackground.jpg"; */
>
> /* background-image: url(images/BannerBackground.jpg); */
>
> /* background-image: url("images/BannerBackground.jpg"); */
>
> /* background-image: url("/images/BannerBackground.jpg"); */
>
> /* background-image: url("../images/BannerBackground.jpg"); */
>
> background-image: url("FSCalc/images/BannerBackground.jpg");
>
> /* background-image: Embed("images/BannerBackground.jpg"); */
>
> /* background-image: Embed("/images/BannerBackground.jpg"); */
>
> /* background-image: Embed("../images/BannerBackground.jpg"); */
>
> /* background-image: Embed(source="images/BannerBackground.jpg");
*/
>
>
> /* background-image: Embed(source="/images/BannerBackground.jpg");
> */
>
> /* background-image:
Embed(source="../images/BannerBackground.jpg");
> */
>
> /* background-image:
Embed(source="src/images/BannerBackground.jpg");
> */
>
> text-align: right;
>
> border-style: solid;
>
> }
>
>
>
> Obviously, many tests have not resulted in something that works. The
> directory structure as I see it in Flash is:
>
> FSCalc
>
> src
>
> css
>
> DHSclasses
>
> images
>
> scripts
>
>
>
> If I change the color in the CSS class, I do see the color change in
the
> canvas object. Therefore, I know that the CSS is available to the
> component.
>
>
>
> Any ideas anyone?
>
