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.

Load this image into the Image Editor.
Click the button "Create Flexible Box" to open the Create Flexible Box Dialog.
We will adjust the offset from the left and top so that we will not cut the image at the gradient area.
We set both left and top to 50.
Click OK to continue. The Insert Flexible Box Images Dialog will be opened. The prefix name will be suggested automatically and the names of all images to be created are shown.
Select GIF for Image Type. You can reduce the number of colors used. The images created will be smaller. However, be careful of the quality of the image if you have a complex gradient image.
Click OK to create the flexible box. If you need more, just copy and paste it to a new location. No new images will be created. It just a normal text element with three more nested text elements inside it.
You can replace the images by overwriting the images using the same prefix name. Let's say "box1" in this case. You only need to select the option "Create Images Only" in the Create Flexible Box Dialog. No CSS rules will be generated.
For existing text elements that want to use this as background, just right click on that text element and select "Add / Remove Inner Container" from the context menu. Set the "Inner Container Count" to 3.

Click OK to add nested text elements. Right click on the flexible box created and select "Copy Style" from the context menu. Then right click on the text element which you has just added nested text elements and select "Paste Style" from the context menu. Now it will look just like a normal flexible box. Please note that the original styles assigned to the element will be gone. If you still need them, you need to assign them to the text elements again.
Below are some flexible boxes that use the same images as background.