Create a flexible box from an image with gradients

This effect may be able to be replaced by CSS3 features like border radius and gradient. You can check out these two tutorials "Create rounded corners text/image element using CSS" and "Add gradient background to a text element using CSS" to see if you can use them instead.
Suppose we have the image below that we want to use it as background for text elements which are varying in size. The largest size of the text element is around 600x500. So the image below has the size of 600x500. We are going to use it to create a flexible box so that it can be used for text elements which are smaller than 600x500. Please note that for this approach to work, the image must have a background color that match the background color of the page. For example, the background color of the image below is white.