Textarea background image not remain stable

I'm having problem getting a background image inside a textarea. I want the image to be at the bottom-right corner of the div, and remain there even when the user scrolls around in the field.but in my case when the page scrolls the image disappears behind the rest of my layout!

Here's the code I'm working with:

Code:
<div id="container">
<textarea cols="75" rows="7" style="width: 80%; height: 120px;" name="message" tabindex="1" style="background: url(image.jpg) no-repeat;background-position:right bottom;background-attachment:fixed;"></textarea>
</div>

The same problem i faced and i got the solution by having this code. Try this, this will definately work
#container {
width:250px;
background-color:#ffffff;
background-image:url(sunshine.gif);
background-repeat:no-repeat;
background-position:175px 200px;
margin:auto;
}
#container textarea {
width:250px;
height:240px;
background-color:transparent;
color:#000000;
overflow:auto;
}
</style>