Html 文本区域，具有灵活的背景图像，可随文本输入调整大小

我有一个

textarea

，背景是一个手绘框。我希望背景图像的

高度

与其中的文本一起拉伸。因此，当文本输入超出

文本区域的
高度
/
宽度
时，图像（以及文本框本身）的大小将调整为与文本的整个高度相匹配，而不是看到滚动条。我假设这可以通过为
textarea
CSS添加
minheight:200px
/
max height:100%
来解决，但我不知道如何正确实现它


我使用的代码是：

    textarea{ 
        background: #FFF url(box.png) no-repeat 0px 0px;
        background-attachment:fixed;
        width: 605px;
        height: 200px;
        line-height:20px;
        padding:30px;
        text-indent:3px;
        margin:0;
        border: none;
    }



编辑：只是澄清一下，这不是我们将要使用的实际图像，设计师正在做一个更好的版本——只是我用油漆拼在一起的一个
 文本区域通常不会调整大小以匹配输入文本的高度，因此需要使用js。有关执行此操作的方法，请参见和。还有jquery插件可用

拉伸背景尤其困难，因为它是手工绘制的

我建议创建一个带有上边框背景图像的
，然后是带有左右两侧背景图像的
，可以垂直重复，然后添加一个带有底部边框背景图像的
。一个带有
内容可编辑的
和
显示：内联块
可以在没有代码的情况下像那样工作，并且可以像
一样工作

演示：

HTML:

<textarea type="text" class="textbox" size="14"></textarea>

<div contenteditable>expaning textarea</div>

div {
    display: inline-block;
    background-image: url(http://i.stack.imgur.com/EiR9T.png);
    background-size: 100% 100%;
    background-repeat:no-repeat;
    min-height: 100px;
    min-width: 200px;
    outline: 0;
    padding: 30px 30px 40px 20px;
}