Позиционирование блока относительно фона

Есть нетривиальная задача.
html, body, .bg-cover { height: 100%; margin: 0; } .bg-cover { background-image: url(//i.stack.imgur.com/JkEWk.jpg); background-size: cover; } .element { position: absolute; background: red; background: rgba(255,0,0,.5); height: 10.416666666666668vw; width: 18.75vw; background-size: cover; z-index: 2; left: 29.947916666666668vw; top: 24vh; }

Фоновое изображение:

Необходимо позиционировать element в белой области фона TV, таким образом, чтобы не нарушалось взаимное расположение фона и блока element
Проблема в том, что при разных разрешениях экрана фон масштабируется по разному. Может как-то можно получать позицию пикселя на фоне через js и относительно этого играть?
Сталкивался кто-нибудь с подобной проблемой?

Ответ

Решение адаптивно и работает во всех браузерах.
Чтобы два блока с изображениями,- в вашем случае картинка комнаты и фон-изображение на TV, согласованно меняли свои пропорции и не нарушалось при этом взаимное позиционирование, необходимо разместить оба изображения внутри блока SVG

Интересно сделать изображение на TV меняющееся динамически. Идея понятна,- нужно спрятать спрайт с изображениями под картинку спальни и прокручивать спрайт, чтобы сквозь вырез экрана TV был виден спрайт. Пробовал достаточно долго варианты с масками, с клипами, комбинированные способы, но не получилось. Отверстие в экране TV образуется, но сквозь него спрайта не видно.
Есть ли у кого идеи, как сделать это?
Update Решение динамической смены изображений - Имитация смены изображений на экране TV