Вместить элементы в первый экран

[mankutila]

При верстке лендинга возникла проблема: необходимо, чтобы первый экран вмещал в себя все элементы, которые представлены на скрине.

Однако, по задумке дизайнера круглые плашки с логотипом и брендами должны быть как бы "лампами", которые связаны с фоновой картинкой блока.

Дизайн сделан для разрешения 1600х900, меньший не представлен. Соответственно, если попытаться посмотреть на 1920х1024 или 1366х768, то высота первого экрана 900 это слишком много.

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

Ситуация осложняется тем, что между блоком с фоном и блоками-лампами нужно поместить еще один блок, который будет анимироваться, т.е. в одну картинку и фон, и кружки не слепить.

Как выйти из этой ситуации? Может, кто-то сталкивался с подобным?

[klierik]

По логике тут проценты должны помочь... но гарантировать не буду, надо пробовать...