HTML+CSS+JavaScript

Простите за такой кривой оборот, ну про "Бэкграндун, скрываемый от середины" :)

Проблема вот в чем.
Имеем код

<div style="float:right; width: 300px">Блок 1</div> <div style="float:right; width: 300px">Блок 2</div>

Под него нужно засунуть фон так, как показано на вложенной картинке, т.е фон должен залезать под часть Блока 2.
Но самом главное, фон должен скрываться в лево, т.е должен заезжать под левый край браузера.

Я долго сидел и думал, как же это сделать, в итоге сунул фон в блок, спозиционировал его от правого края куда надо.
Минус такого решения в том, что картинка довольно высокая, а точнее 1460 пикслей в высоту :)
Что бы, если Блок 1 или Блок 2 больше по высоте, чем картинка, пользователь мог увидеть всю картинку.
Таким образом блоку приходится жестко задавать высоту или если Блок 1 или Блок 2 меньше этой высоты, то совершенно справедливо появляется вертикальная прокрутка.

Как бы сделать так, без скриптов, чтобы блок был нужной высоты, но если Блок 1 и Блок 2 ниже это Высоты, прокрутка страницы все равно кончалась на высоте Блока 1 и Блока 2...

Немного сумбурно вышло, но, надеюсь, понятно :)

Заранее спасибо!

Никто не может помочь?

Не чересчур понятно потому что.
Покажите страницу с тем, что уже получилось и лучше нарисуйте то, как должно быть.
Три серых прямоугольника не очень помогли.

В общем не дождался решения, просто увеличил картинку черным цветом справа (

Размер картинки увеличился незначительно, с пивком прокатит.