Skip navigation
Home/Support/

Forums

Up to Discussions in Flex
285 Views 2 Replies Latest reply: Mar 10, 2010 4:21 PM by JohanVelthuis RSS
jsd99 User
jsd99
214 posts since
Jan 7, 2010
Currently Being Moderated

Mar 9, 2010 4:07 PM

Background image + scaleGrid

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?

  • JohanVelthuis User
    JohanVelthuis
    23 posts since
    Dec 1, 2009
    Currently Being Moderated
    1. Mar 10, 2010 4:21 PM (in response to jsd99)
    Re: Background image + scaleGrid

    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)

    scaleGridLeft="16"

    scaleGridRight = 340 (356 - 16)

     

    background-image: Embed(source="assets/background.png", scaleGridBottom="160", scaleGridLeft="16", scaleGridRight="340", scaleGridTop="44");

     

    Hope this helps

     

    Johan Velthuis

  • jsd99 User
    jsd99
    214 posts since
    Jan 7, 2010
    Currently Being Moderated
    2. Mar 10, 2010 4:27 PM (in response to JohanVelthuis)
    Re: Background image + scaleGrid

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

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points
Choose your region
Security Contact Adobe Report piracy EULAs Permissions and trademarks Careers

Copyright © 2011 Adobe Systems Incorporated. All rights reserved.

Reviewed by TRUSTe: site privacy statement

Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).