Карта изображения на главной странице отзывчивого центра

Question

Я читал этот форум какое-то время и решил, что могу найти помощь на этом, потому что я не смог найти точного ответа.

Я хочу сделать целевую страницу с большой фотографией и нанести на нее отзывчивую карту изображения. Я могу сделать карту, я могу поместить изображение, но проблемы начинаются, когда я хочу сделать его отзывчивым, пока изображение остается центрированным (background-position: center). Если я не использую background-position: center, изображение выглядит очень маленьким на мобильном устройстве, и это не будет работать так.

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

Вот ссылка на мою работу сайта, если вы можете помочь мне http://www.mafia.brandscatter.com/

Answer 1

Как о чем-то вроде этого?

https://jsfiddle.net/Lj0w9dnf/1/

.background{ 
    background-color:red; 
    width:100%; 
    height:100vh; 
    padding:25%; 
} 

.map{ 
    background-color:blue; 
    height:100%; 
    width:100%; 
} 


<div class="background"> 
    <div class="map"> 
    </div> 
</div>