Javascript-форум - В каком направлении копать для адаптивного скроллируемого фона?

Добрый день! Есть такая задача - в заготовке для сайта имеется картинка очень большой ширины (около 4000 px). Её необходимо сделать адаптивным фоном (к размеру окна браузера/экрана компьютера), выводить центральную часть с несколькими товарами которые "вшиты" в картинку - а остальное пустить под возможность горизонтального скроллинга. (На саму фоновую картину должен быть пристыкован атрибут usemap, сообщенный с "картой", ведущей на страницы конкретных товаров).

Пока что удавалось реализовать лишь адаптивность, но без скроллинга (и кажется, в таком варианте и map не пристыковать):

Код:

.box{

background: url('../img/1.jpg') no-repeat;

background-position: center center;

background-attachment: fixed;



background-size: cover;

}

(.box - это главный контейнер вложенный в <body>)

Скроллингу мешает background-attachment, выставленное в fixed. Но стоит убрать fixed, тогда исчезает адаптивность(((

Как грамотно решается такая задача?) Может здесь надо задействовать jQuery (и как именно)?

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