Как сделать элемент html произвольного размера с частично прозрачными границами?

Рассмотрим следующее изображение:

Предполагается, что это участок травы с неровными краями. Это png-изображение размером 200x200 пикселей с прозрачностью по краям для естественного вида.

Проблема в том, что я пытаюсь создать веб-страницу, на которой я хочу, чтобы различные элементы разного размера имели этот фон, но я не могу использовать простое свойство фона css, потому что повторение такого изображения не означает ' • Работа: например, прозрачность слева отчетливо видна как шов между каждой копией изображения. Но если я просто растягиваю изображение по размеру, оно тоже выглядит не очень хорошо.

Есть ли какой-нибудь (кроссбраузерный) способ сделать это? Решения jQuery также приемлемы. Спасибо!