javascript - How to scroll a background image together with text in textarea?

Question

I know this is bit difficlut to explain but you'll get an idea by seeing my code below, the situation is I've a textarea which having a line background(something like notebook and the image style is repeat), also the textarea become fixed height for eg. 300px, so my question is when a scroller comes I want to stick the lines with the text, now the text is scrolling and the background lines stay back into a fixed position..

Just tell me your suggetions, is that possible to scroll the background lines together with the text?

Here is my html code..

<div style="width:500px; height:300px; margin:0px auto; background:#ebebeb;">
<textarea style="width:100%; height:300px; background:url(line.jpg) repeat; line-height:30px; font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif;" name="" cols="" rows=""></textarea>
</div>

and here you can see the image - { }

Answer 1

Use background-attachment: local; after you set your background image.

demo

Works in IE9+, Safari 5+, Chrome and Opera

Does not work in Firefox - see this.

HTML:

<div>
    <textarea>
        background-attachment: local;
        <!-- and so on, many more lines -->
        background-attachment: local;
    </textarea>
</div>

CSS:

div {
    width: 500px;
    margin: 0 auto;
    background: #ebebeb;
}
textarea {
    display: block;
    width: 100%;
    height: 300px;
    background: url(http://i.stack.imgur.com/EN81e.jpg);
    background-attachment: local;
    font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}

---

EDIT

Another better compatibility solution (only browsers in which this doesn't work are Opera Mobile and Opera Mini) would be not to use a textarea, but another div with a contenteditable attribute.

demo

HTML:

<div class='outer'>
    <div class='inner' contenteditable='true'>
        background-attachment: local;
                <!-- more stuff -->
        background-attachment: local;
    </div>
</div>

CSS:

.outer {
    overflow-y: scroll;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    background: #ebebeb;
}
.inner {
    width: 100%;
    min-height: 300px;
    background: url(http://i.stack.imgur.com/EN81e.jpg);
    font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}