How can I create an arbitrary size of an html element with partially transparent borders?

Question

Consider the following image:

It should look like a patch of grass with rough edges. This is a 200x200 pixel image with transparency around the edges to give a natural look.

The problem is that I am trying to create a webpage where I want different elements of all different sizes to have this background, but I cannot use a simple css background property, because repeating an image like this t: transparency on the left, for example , is clearly visible as a seam between each copy of the image. But if I just stretch the image to fit, it doesn't look very good either.

Is there a way (cross browser) for this? JQuery solutions are also acceptable. Thanks!

Answer 1

JQuery solution:

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

---

border-image is a pure CSS solution:

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

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

Generator: http://border-image.com/

Answer 2

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

Answer 3

sounds to me like you need top, bottom, left, right images (and images for 4 corners), with a central image that you can repeat. Then a little CSS to put them all together correctly. Very similar to how people made rounded corners! The real trick gets a repeating central image. This can be simplified only by the size of your center div in steps that match the size of the center image you ended up with.

TBH I don’t even know if it is possible to come up with a central magician who will not look like a patchwork quilt when it repeats.

CHANGE I had a better idea!

If you create images that effectively mask to “skip” you a grassy image. You can use the css sprite technique to determine the size of the image, and then overlay the side / corner images to get a torn edge effect. On the right, css would be pulled out of a larger image large enough to handle your maximum expected tile.

Answer 4

You can wrap the content area in 4 other divs and give PNG as an image for the other side for each div. The problem is that your content area div will have a solid background and will display in a transparent area for your edges.

You can use a different approach.

Top div Float Left Edge Div, Content Div, Float Left Edge Div (right edge) Lower div

It will be a cross browser compatible with pain to customize.