¿Cómo desplazar una imagen de fondo junto con el texto en textarea?

Question

Sé que esto es un poco difícil de explicar, pero obtendrá una idea al ver mi código a continuación, la situación es que tengo un área de texto que tiene un fondo de línea (algo así como un cuaderno y el estilo de imagen es repetido), también el textarea convertido en altura fija para, por ejemplo. 300px, entonces mi pregunta es cuando viene una rueda de desplazamiento. Quiero pegar las líneas con el texto, ahora el texto se desplaza y las líneas de fondo quedan en una posición fija.

Solo díganme sus sugerencias, ¿es posible? para desplazarse por las líneas de fondo junto con el texto?

Aquí está mi código html ..

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

y aquí se puede ver la imagen - {}

Answer 1

Uso background-attachment: local; después de configurar la imagen de fondo.

demo

Obras en IE9 +, Safari 5, Chrome y Opera

no funciona en Firefox - ver 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; 
} 

---

EDITAR

Otra better compatibility solution (sólo los navegadores en los que esto no funciona son Opera Mobile y Opera Mini) no usaría un textarea, sino otro div con un atributo contenteditable.

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