Consider the following image:
This is supposed to look like a patch of grass with rough (deckled) edges. It’s a 200×200 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!
A jQuery solution:
http://code.google.com/p/scale9grid/
border-imageis the pure CSS solution:Unfortunately, the browser support is not yet good enough: http://caniuse.com/border-image
A generator: http://border-image.com/