i'm creating a page that needs to be scalable for long/short amounts of text. i have a background image that i want to layer the text over.

for the background image itself, i want to cut it up as follows:
keep the top 50%
tile the next 25%
keep the bottom 25%

now i know how to repeat an image no problem. my question is, how can i set a min-height on each iteration of the repeating image? i need to make sure that the tiled image will be able to seamlessly flow into the bottom image, and if my content only goes halfway into that image, it will just stop and position itself next to the bottom image.

basically, the image to be repeated is 18px high. i need to make sure that every time it is repeated, it will show the entire height of that image.

is there a way to do this in css? or do i have to use js? i'm not terribly js proficient, so if there is a js solution, a nudge in the right direction would be extremely appreciated.