Textarea background image scrolls when text exceeds the height.

Question

Hi all!

I am trying to resolve an issue in IE7.

My text area has a background image behind it which then scrolls with the text when the text exceeds the height of the text area and begins to scroll with the text.

Anyone know why this is happening and what the solution this would be?

Thanks, James

Answer 1

Have you tried setting the background-position to background-position: top center;?
(Or something like background-position: 50px center;.)

Answer 2

Using:

textarea { background: transparent url(/images/test-bg.jpg) no-repeat top left; width: 500px; height: 230px; }

should give you a background image that is fixed to the top left of the textarea box that is fixed when the text exceeds the initial dimensions.

Answer 3

This is a problem that only happens with IE 6 and 7, which has been resolved in IE8.

To fix the problem, try wrapping the <textarea> in a <div>. Apply the background and border properties of the <textarea> to the <div>, then set the border and background of the <textarea> to none.

You'll probably still need to tweak the margin and padding of both the <div> and the <textarea> to get it look just right, but now you should be pointed in the right direction.