9-Grid Scaling Support in Javascript/CSS

by Gordon. 44 Comments

If you have ever spent any time developing and styling flex applications, you have probably come to find the 9-grid scaling feature indispensable. For those of you unfortunate enough to have never experienced this feature, it enables you to easily scale an image while preserving the scale of certain portions of the image based where it lies within a specified grid. Parts of the image which lie in the corners of the grid will not be scaled and parts which lie in the sides will only be scaled in one direction.

Traditionally, to achieve this same effect in plain html/css you would slice the background image into multiple files and have extra structural markup in order to place the images in the appropriate places. This is particularly annoying for fluid layouts. Being faced with a small side project in html/css and desperately wanting to avoid this css styling tedium, I created a jQuery plugin which brings 9-grid scaling support to html/css. I have also put up some examples and I have also put it up on google code. I am looking forward to using this as a more efficient alternative.

UPDATE: This plugin is outdated and has instead been replaced by the border-image style.

  • David

    Love it! Thank you very much. This is exactly what I was wanting

  • Max

    Stumbled across this sort of by accident, but don’t need it (yet!). It looks very well done though, examples worked flawlessly. I’ll consider using this plugin in the future, nicely done!

  • David

    Love it! Thank you very much. This is exactly what I was wanting

  • Max

    Stumbled across this sort of by accident, but don't need it (yet!). It looks very well done though, examples worked flawlessly. I'll consider using this plugin in the future, nicely done!

  • sam

    Please include your style sheet and image(s) – it helps to follow the example. I tried wih a sample background and it does not seem to work

  • sam

    Please include your style sheet and image(s) – it helps to follow the example. I tried wih a sample background and it does not seem to work

  • Rodrigo Gregorio

    How Very Nice plugin ,

    imagina o que dar para fazer com isto.

    Parabéns!

  • Rodrigo Gregorio

    How Very Nice plugin ,

    imagina o que dar para fazer com isto.

    Parabéns!

  • http://www.greenpowerguides.info DIY Solar Panels

    This is quite some plugin. Thanks for this one!

  • http://www.greenpowerguides.info DIY Solar Panels

    This is quite some plugin. Thanks for this one!

  • eVp

    The plug-in doesn’t actually 9-slice-scale, but rather draws a large amount of unscaled images? It is, at least for me, extremely slow if your source image is what it should be (leaving 1 pixel to be scaled…). Since basic css supports repeat-x and repeat-y, why not make it a true 9 slice-scale? ie have 9 divs instead of 900?

    Could be awesome, but the current implementation is too slow for me.

    • eVp

      ahh… nevermind that.. I now realize why it cannot be done… too bad.

  • eVp

    The plug-in doesn't actually 9-slice-scale, but rather draws a large amount of unscaled images? It is, at least for me, extremely slow if your source image is what it should be (leaving 1 pixel to be scaled…). Since basic css supports repeat-x and repeat-y, why not make it a true 9 slice-scale? ie have 9 divs instead of 900?

    Could be awesome, but the current implementation is too slow for me.

    • eVp

      ahh… nevermind that.. I now realize why it cannot be done… too bad.

  • http://sites.google.com/site/craigslistproxies/ Craigslist Proxy

    Nice one. I have stumbled and twittered this for my friends. My friends will enjoy reading it also.

  • http://www.extremerestraints.com/butt-plugs_1/ butt plug

    Good thing I landed on your blog on my search for a grid scaling support for java. Very concise and easy to follow explanation, thanks for sharing the link as well!

  • http://www.evokedesign.com miami website design

    Cool feature. It actually enables us to easily scale an image while preserving the scale of certain portions of the image based where it lies within a specified grid.

  • http://www.evokedesign.com miami website design

    Cool feature. It actually enables us to easily scale an image while preserving the scale of certain portions of the image based where it lies within a specified grid.

  • Name

    The examples page is empty? I just see a “No posts yet!” message when I click on the examples link.

  • Name

    The examples page is empty? I just see a “No posts yet!” message when I click on the examples link.

  • AD

    There are no examples. Please post them.

    • http://hempton.com ghempton

      Just re-posted the examples. I must have lost them when I changed hosts.

  • AD

    There are no examples. Please post them.

    • http://hempton.com ghempton

      Just re-posted the examples. I must have lost them when I changed hosts.

  • Pingback: 9-Grid Scaling Support in Javascript/CSS « Barney Fox

  • Anonymous

    I can see this being extremely useful on pretty much every project I undertake – thank you!

  • barneyfoxuk

    I can see this being extremely useful on pretty much every project I undertake – thank you!

  • http://raxanpdi.com/ php/ajax

    Love this little plugin.

    The only problem that I’ve found thus far is that it does not automatically scale the height of the div

    Any suggestions on this issue?

  • http://raxanpdi.com/ php/ajax

    Love this little plugin.

    The only problem that I've found thus far is that it does not automatically scale the height of the div

    Any suggestions on this issue?

  • Anonymous

    Cool. My 2 cents:

    1. Firefox version detection is wrong, parseFloat(version.substr(3)) returns ’0.1′ in Firefox 3.5.3
    2. Could you make fallback version stretch images instead of tiling, using IMG tags? I would happily provide manually splitted images for such a case, because adding tons of elements slows down browsers greatly ((
  • alexandernikitin

    Cool. My 2 cents:

    1. Firefox version detection is wrong, parseFloat(version.substr(3)) returns '0.1' in Firefox 3.5.3
    2. Could you make fallback version stretch images instead of tiling, using IMG tags?
    I would happily provide manually splitted images for such a case, because adding tons of elements slows down browsers greatly ((

  • guodan
  • http://gisnap.com gisnap

    Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/ The place where fun never ends

  • http://gisnap.com gisnap

    Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/
    The place where fun never ends

  • Raymond

    Here’s a link to enable dynamic height:

    http://code.google.com/p/scale9grid/issues/detail?id=14

    • Alex K

      I added this code, but when the height of a paragraph inside the div (the container with the scale9 background applied) expands vertically down, the div background image does not adjust. The only browser it works properly in is IE (boo-urns).

  • Raymond

    Here's a link to enable dynamic height:

    http://code.google.com/p/scale9grid/issues/deta…

    • Alex K

      I added this code, but when the height of a paragraph inside the div (the container with the scale9 background applied) expands vertically down, the div background image does not adjust. The only browser it works properly in is IE (boo-urns).

  • http://carvalhar.com/ Carlos

    hi there! I’m trying to use your plugin with jQuery UI Dialog. Is there a chance to apply 9-grid all the time, with a listener? For example, if i resize the window, with a listener for resize event, the 9-grid is called, but it doesn’t work very well with the actual dimensions. So…how should i use this plugin called by a container resize listener?

    thanks, Carlos

  • http://carvalhar.com/ Carlos

    hi there!
    I'm trying to use your plugin with jQuery UI Dialog. Is there a chance to apply 9-grid all the time, with a listener?
    For example, if i resize the window, with a listener for resize event, the 9-grid is called, but it doesn't work very well with the actual dimensions.
    So…how should i use this plugin called by a container resize listener?

    thanks,
    Carlos

  • Case

    You are so Awesomely Cool !

  • Rocky Lau

    looks good but laggy in FF and Opera though.

  • Pingback: Two Game Changing CSS 3 Features | CodeBrief

  • Anonymous

    Good job