2 Replies Latest reply on Mar 10, 2010 3:21 PM by JohanVelthuis

    Background image + scaleGrid

    jsd99 Level 3

      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:


      Application {
          background-color: undefined;
          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?

        • 1. Re: Background image + scaleGrid
          JohanVelthuis Level 1

          Hello jsd99,


          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


          Johan Velthuis

          • 2. Re: Background image + scaleGrid
            jsd99 Level 3

            I never got it to work with background-image.  I changed it to border-skin and that made it work.