I want my entire application to have a png image as the background image, and I don't want parts of it to stretch when the application container stretches. I think I need to use a scaleGrid for this, but I don't know how to do it. Here is the css for my Application tag:
background-image: Embed(source="assets/background.png", scaleGridBottom="80", scaleGridLeft="0", scaleGridRight="356", scaleGridTop="40");
The overall dimensions of background.png are 356x176. I want 16 pixels on the left and right unscaled. The top 44 and bottom 16 should remain unscaled as well. I read on the net that there is a Design view in Flex Builder that can help with this, but when I open it, I don't see the actual image, just a blurry placeholder, and I can't find any scale 9 grid tool either. Is there a way to do it just by knowing the numbers I provided?
I tried you're code example and it works, you just have the wrong values in the scaleGrid attributes:
scaleGrid values are always calculated from the upper left corner, so you're code should be als follows:
I assume you're image is width x height 356 x 176:
scaleGridTop="44" (the 44 you want as top)
scaleGridBottom="160" (176 - 16 as you're bottom margin)
scaleGridRight = 340 (356 - 16)
background-image: Embed(source="assets/background.png", scaleGridBottom="160", scaleGridLeft="16", scaleGridRight="340", scaleGridTop="44");
Hope this helps
I never got it to work with background-image. I changed it to border-skin and that made it work.