Show page lines in a textarea

Question

I am trying to build a HTML5 iPad application where I want to provide the user with a text area with a page lines like effect to enter their details. How can I do this?

Answer 1

The easiest way to achieve this is to create a simple PNG-image containing a horizontal line and use it as a repeating background on your textarea.

I created a simple example: http://jsfiddle.net/r4c2a/1/

Step by step, what you should do is:

1. Create a repeating pattern image.
2. Create your textarea.
3. Use CSS to define the line-height of the image and make it as high as your pattern is.
4. ???
5. Profit

Of course, this is just a rudimentary example and you can style it pretty much any way you want it to look.

Answer 2

background-image for textarea? Eg: http://css-tricks.com/creating-a-nice-textarea/

Answer 3

This type of questions are already been answered at How can I show lines in a texarea to make it look like notepad?

And :: CSS Styling text areas like notebook-look

Please refer to them