Adding lined paper style to text with CSS

1

OK so here is what I want to do:

I want to add lines to the text as the image shows. I’ve tried in CSS with a background image. That sort of works - it adds the lines behind the text, but the text is not in line with the lines. I’ve tried to change the line-height to compensate but the optimum I can use with it going all over the place is 30px (which roughly puts the text in the centre of two lines).

So it looks like this:

I’ve tried doing it with an image of the single line and space let for the text - that started with the top lines of text being far away from the lines, whilst towards the end of the paragraph, the text is touching the lines.

Next idea was to create an image with multiple lines and space and just put text onto that. That’s worked but it still doesn’t look totally right.

The CSS I’m using for this is:


.entry {
	font-family: "Times New Roman";
	color: #606161;
	font-style: italic;
	font-size: 15px;
	margin-top: -15px;
	text-align: justify;
	line-height: 30px;
}

.post {
	background-image: url('line.png');
}

.entry = text.

.post = enclosing class with text and post title.

Any help would be appreciated.