Textarea background image scrolling when entering

Question

Textarea background image scrolling when entering more text in ie8, i have used sprite concept in css so when entered text more its showing another image as background

textarea{
  border:0 none; 
  background:url(../images/sprite.png) no-repeat -272px -63px; 
  max-height:80px; 
  max-width:191px; 
  overflow-y: auto;
}

Answer 1

Sorry in advance if i misunderstood you question.

Do you need this, see Demo in IE8 by clicking the following URL:

http://jsfiddle.net/rathoreahsan/MmVwA/4/

Answer 2

Use this:

background:fixed url(../images/sprite.png) no-repeat -272px -63px;

Answer 3

Since Microsoft “corrected” the background attachment issues with IE7 and now is no way of having an overflow of text in a input or textarea element and not having the background scroll with the text, and if you try “background-attachment: fixed;” the background doesn’t even display. Because is no really css hack what fix the problem, you need to think out of css. Instead to style just the textarea element, make a supplementary div like container for textarea and apply the background image to the div, instead to textarea. Let the textarea without border and background to make a proper overlay. so i am using code like this

.textarea_div{background:url(../images/sprite.png) no-repeat -272px -63px;}
textarea{border:0 none; 
max-height:80px; 
min-height:80px; 
max-width:191px; 
min-width:191px;}

HTML

<div class="textarea"><textarea></textarea></div>