How can I show lines in a textarea to make it look like notepad?

Question

I need to show lines in my text-area to make it look a like notepad. I have a single text-area only. The below notepad is for reference.

Answer 1

Here's an idea: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

In short: set a background-image and set line-height to whatever line height the image is using.

Answer 2

You can do this with CSS styling, based on your image, you can do this:

​textarea#area {
    width: 300px;
    height: 400px;
    padding: 0 0 0 20px;
    line-height: 30px;
    background: #fff url("http://i.stack.imgur.com/UfzKa.jpg") no-repeat -75px -160px
}​

See the example fiddle here