HTML+CSS+JavaScript

Для div id=main задан фон в виде картинки, высотой 1200px. Необходимо, чтобы при растягивании страницы вниз, в продолжение главного фона, растягивался другой фон по Y с повторениями, как это лучше сделать?

Фон у объекта может быть в единственном числе.
Фон может иметь разные свойства: быть повторяющимся или неповторяющимся, повторяющимся по одной оси или по обеим... НО фон у одного объекта может быть только ОДИН.

Поэтому Ваша задача ("повторяющийся второй фон ниже первого") решается ТОЛЬКО добавлением другого объекта с другим (вторым) фоном.

В общем виде (когда неизвестно - будет ли суммарная высота контента больше 1200 пикселей по высоте или не будет) задача может быть решена только скриптом.

Приблизительная схема решения:
1. ПЕРВЫЙ объект, в котором находится контент, имеет "верхний" z-index (положим, равный десяти). И этому ПЕРВОМУ объекту фон не задаётся вообще, т. е. он - прозрачный, transparent)
2. Под этот ПЕРВЫЙ объект "подкладывается" (меньший z-index, равный пяти) другой ВТОРОЙ объект той же ширины и той же высоты, что и первый и ему задаётся фоном та самая неповторяющаяся картинка высотой 1200 пикселей.
3. По загрузке ПЕРВОГО объекта определяется его фактическая высота в пикселях. Если высота больше 1200, то вновь создаётся ТРЕТИЙ объект, размещаемый под ПЕРВЫМ (z-index равен пяти) и начинающийся сразу после ВТОРОГО. И уже ТРЕТЬЕМУ объекту назначается другой повторяющийся фон.

PS. Разумеется, ТРЕТИЙ объект может сразу присутствовать на странице в состоянии "невидимости" (display = none), и это состояние по необходимости изменяется на block

в первый див ставляем другой и третий
в втором ваш 1200 поверху и норепит

в первом диве фон тянется на весь блок x, y
в третьем контент.
правда неизвестно что за фон идет после 1200, возможно нижний фон не будет в стык в стык если этого надо с этими 1200.

сделай кароче у своей картинки в фотошопе переход в какойнибудь цвет
и пропиши бекграунд у этого поля и картинку ноу репит и цвет
и все