Each background middle img repeated vertically must appear full size to match bottom img

I spent more than 10 hours trying to find a solution to my problem (most answers were on stackoverflow) but nothing seems to be exactly what I need and I may not be experienced enough to adapt a solution to my own issue.

So, I made a picture where I want text to appear on my website. But only inside that picture (frame). So I cut it in 3 parts and made it tileable.

The 3 images and what it should look like (notice the fact there are transparent parts)

So what I simply did in html/css : I made 4 divs, one for the top part, one for the middle part, one for the bottom part and one for the page content (text or images).

The middle part has a repeat-y. So here is the result :

Middle image is cropped

Depending on the length of the text, it stops randomly and then it messes everything. It must fit perfectly each time, and if it's longer than 242 pixels (height of the top image), it doesn't fit. I would like the div to show the entire "middle.png" WHEN repeated or to make the div lengths = (242 pixel * amount of "middle.png")

Please, give me a solution (if possible, in pure CSS HTML because I don't know JS) :(