Question

I have a textarea whose background is a hand-drawn box. I’d like for the height of the background image to stretch along with the text that goes in it. So when text is input beyond the height/width of the textarea, instead of a seeing a scrollbar, the image (along with the textbox itself) is resized to match the full height of the text. I assume this could be fixed with adding a min-height: 200px/max-height:100% for the textarea CSS but don’t know how to implement it properly.

The code I’m using is:

    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;
    }

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

EDIT: Just to clarify, this isn’t the actual image we’ll be using, designer is doing a much nicer version – just one I plonked together in paint.

Answer 1

A <div> with contenteditable and display: inline-block; can function like that with no code and works like a <textarea>.

Demo: http://jsfiddle.net/ThinkingStiff/sau9r/

HTML:

<div contenteditable>expaning textarea</div>

CSS:

div {
    display: inline-block;
    background-image: url(https://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;
}