How can I make an arbitrary sized html element with partially transparent borders?

Question

Consider the following image:

This is supposed to look like a patch of grass with rough (deckled) edges. It's a 200x200 pixel png image, with transparency at the edges to give a natural look.

The problem is, I'm trying to design a web page where I want various elements of all different sizes to have this background, but I can't use a simple css background property, because repeating an image like this doesn't work: the transparency on the left, for instance, in plainly visible as a seam between each copy of the image. But if I simply stretch the image to fit, it doesn't look very good either.

Is there any (cross browser) way to accomplish this? jQuery solutions are acceptable as well. Thanks!

Answer 1

A jQuery solution:

http://code.google.com/p/scale9grid/

---

border-image is the pure CSS solution:

• http://www.w3.org/TR/css3-background/#border-images
• https://developer.mozilla.org/en/CSS/-moz-border-image

Unfortunately, the browser support is not yet good enough: http://caniuse.com/border-image

A generator: http://border-image.com/

Answer 2

You can do it with the CSS3 border-image property. It is supported (in the form of prefix variants) by all major browsers except you-know-who.