Question

I would like to add a background image to the textarea that scrolls along with the content. I’m programming in HTML/JavaScript/CSS specifically for mobile Safari.

I’ve attempted a variety of things but nothing seems to work.
I tried placing the textarea on top of the image and then scrolling the background image whenever the textarea is scrolled. It works more or less fine when I’m typing text, but the native scrollbars (which I don’t want to get rid of) make it look a wreck on mobile Safari.

I tried using a contentEditable div container but that seemed to throw problems too (again with the scrolling).

Is it possible to have a textarea with native scrolling with a background image that scrolls?

Answer 1

A background image can be applied to an input or text element as shown:

check the fiddle jsfiddle

html

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

css

.outer { width: 310px; height: 250px; padding: 5px; border: 1px solid #666; -webikit-border-radius: 3px; -moz-border-radius: 3px; overflow:auto;overflow-x:hidden  }

textarea{
    background: #fff url('http://www.toddle.com/images/300_words_background.gif') 0 -220px no-repeat;
    width: 302px;padding:5px; height:99em;
}

Note: The difference between the two is that the content within the div (assuming it’s coded correctly) will be included as search engine usable text whereas the textarea content will not.