テキストエリア内のテキストと共に背景イメージをスクロールする方法はありますか？

Question

これは説明するのが少し難しいですが、私のコードを見てアイデアを得ることができます。状況は私には線の背景（ノートのようなもので、イメージのスタイルは繰り返しです）を持つテキストエリアがあります。 textareaは固定高さになります。 300pxなので、私の質問はスクロールバーが来るときです。テキストをスティックしたいときに、テキストがスクロールして背景の線が固定位置に戻ってくるようになりました。

あなたのsuggetionsを教えてくださいテキストと共に背景線をスクロールするには？ここで

は私の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> 

とここでは、画像を参照することができます - あなたは、背景画像を設定した後に使用background-attachment: local; { }

Answer 1

を。 IE9 +、サファリ5+、ChromeとOperaの

で

demo

作品は、Firefoxで動作しません - thisを参照してください。

HTML：

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

CSS：これが動作しないで

​​

---

EDIT

別better compatibility solution（唯一のブラウザはOperaのモバイルで、 Opera Mini）はtextareaを使用せず、別のdivを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; 
}