Basic Flex image question

[Jerry62712]

1) I want an image (32 X 32) to repeat across the page. This would be like the "repeat-x" function in css - it repeats to whatever the browser window size is.

2) I want to constrain an image (970 X 120) to width of page X 100. This also is easy in css, but how do you do it in Flex? You can't use the width parameter as if you set it to 100%, it automatically scales the height to match the ratio of the real width to the form (about 700).

Thanks In Advance,
Jerry

[Peter Cowling]

Hi,

1. You can use css in flex, and do the repeat x in it. I think the image has to be a background image, though not sure.

2. Two attributes you should know about, both of which you can set within the image tag:

scaleContent - false disables scaling
maintainAspectRatio - false to allow an image to fill all available space regardless of its dimensions

[Jerry62712]

Hi,

1. You can use css in flex, and do the repeat x in it. I think the image has to be a background image, though not sure.

With assist I can see the background-image and I assume it is the normal css format of url(xyz). But I don't get any background-repeat (tick, tick, tick - trying it anyway...)

Nope. Here is the css:


.imageStretcher {
background-image: url("../images/TabBarBackground.gif");
background-repeat: repeat-x;
}


Here is the page:
<!-- 32 X 32 -->
<mx:Image id="headerColorBar"
source="../images/TabBarBackground.gif"
styleName="imageStretcher"
left="0" top="34" />


I've tried it with and without the image in the code and the code image does appear so I know the URL is correct.
Sigh. Any ideas will be immediately tried.


2. Two attributes you should know about, both of which you can set within the image tag:

scaleContent - false disables scaling
maintainAspectRatio - false to allow an image to fill all available space regardless of its dimensions

I tried it with scaleContent true and then false. Then I tried it with maintainAspectRatio false, but I didn't get it to go across the page.

I wouldn't have thought this to be so difficult in Flex. Sigh. Any other ideas?

[Peter Cowling]

Hi,

1. This will not work, because you are setting a background image to an image. You should set a background image to some other component like canvas, and set the canvas size to be sufficient that you can see multiple versions of the background image.

2. If you do maintainAspectRatio to false, and set you component to 100% and 100px (height I think it was) that should work. If not, please post the relevant code.

EDIT: Actually 1 probably would work, but it is not the best solution.

[Jerry62712]

The canvas didn't work for me. Here is what I tried:

<mx:Canvas
x="0" y="35"
width="100%" height="32"
backgroundImage="@Embed(source='../images/TabBarBackground.gif')"
id="canvasImageRepeat"
styleName="imageStretcher"/>


scaleContent="true" maintainAspectRatio="false" are not properties of canvas so I didn't use them. The css is:
.imageStretcher {
background-image: url("../images/TabBarBackground.gif");
background-repeat: repeat-x;
}


This frustrated newbie appreciates the help.

[Peter Cowling]

Okay try taking out the background image attribute in the canvas component; you already have it in the css.

[Jerry62712]

I changed the size to 100% and it worked!

You, sir, are a genius! Other forums of this type have a "thanks" button or a "reputation" that I can't find here. If that exists, please let me know.

[Peter Cowling]

Glad that worked out for you.