Как реализовать адаптивный скроллируемый фон, да еще с usemap?

Question

[Никита Данилов]

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

Пока что удавалось реализовать лишь адаптивность, но без скроллинга:

.box{
background: url('../img/1.jpg') no-repeat;
background-position: center center;
background-attachment: fixed;

background-size: cover;
}

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

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

Answer 1

[Андрей]

а если обернуть в блок с position:fixed ?

Comments

[Никита Данилов]

Я уже об этом думал, беда в том что пришлось вообще от делания картинки фоновым изображением отказаться и вставлять её как . Ибо атрибут usemap требует оного тега :(

Щас пытаюсь играться с конструкцией "img внутри div" и разными вариантами позиционирования и масштабирования в них.

[Андрей]

тогда object-fit:cover для img вам в помощь

[Никита Данилов]

*Не дописалось: "и вставлять её как img"

[Никита Данилов]

Спасибо, буду проверять :)

[Никита Данилов]

Оно вообще почему-то не работает...

[Андрей]

нужно родителю задать размеры, вроде так, смотрите спецификацию, но работает как background-size: cover;

[Никита Данилов]

Некий близкий к целевому результат удаётся получать с помощью position fixed у div и position absolute у img с max-width 100% - однако почему-то скроллинг работает только в одну сторону, в сторону правой части главкартинки. А левая обрезается и не прокручивается туда.

[Андрей]

а почему товары или ссылки на них нельзя спозиционировать абсолютно, поверх картинки-фона, а позиции указать в vh и vw?

[Никита Данилов]

Заказчик хочет чтобы товары были вшиты в фон и всё было одной картинкой, а поверх usemap...

[Андрей]

Никита Данилов: мне кажется usemap и адаптив не получится, т.к. ему нужны координаты в пикселях. Ссылки надо сделать ссылками, пустыми блоками поверх фона, а их размер и позиции высчитывать или скриптом или через vh и vw

[Никита Данилов]

Ок, подумаем