давно мучаюсь вопросом - есть шаблон страницы, блок контента состоит из трех фоновых рисунков, собственно верх, низ и центральная часть которая повторяется через 200 пикселей, визуально рисунки стыкутся только если соприкасаются краями.

контентный блок тянется по высоте в зависимости от контента.

как сделать чтобы нижний рисунок всегда стыковался ровно к нижней части повторяющегося? предположим если бы контентный блок тянулся не по строчкам контента, а скачками по 200 пикселей, то проблема бы решилась.

на данный момент работает решение на JQuery - вычисляется высота контентного блока и исходя из нее задаются координаты для абсолютно позиционированного блока с нижним рисунком. хотелось бы обойтись без яваскриптов, такое возможно средствами только CSS?