Как быстро разместить элемент в определенной точке страницы, не теряя при этом голову над медиа-запросами ⇐ CSS

[Anonymous]

Итак, у меня есть немного странная идея. Фоновое изображение для лендинга моего (в стадии разработки) веб-сайта представляет собой здание, которое я создал в Blender, и моя идея состоит в том, чтобы поместить простой элемент div прямо над дверью здания, который будет перенаправлять пользователя с целевой страницы на настоящая домашняя страница при нажатии.
У меня есть две разные версии этого фонового изображения, между которыми я переключаюсь с помощью медиа-запроса: стандартная (горизонтальная) версия для устройств с альбомной ориентацией и удачно обрезанная (вертикальная) версия для устройства, имеющие портретную ориентацию. Это означает, что положение двери на разных устройствах совершенно несовместимо.
Проблема в том, что я схожу с ума, пытаясь найти решение, позволяющее расположить этот элемент «дверь» с хорошей отзывчивостью. Есть ли какие-нибудь способы избежать использования миллиарда медиа-запросов? Если нет, то, по крайней мере, как лучше всего ответить на эти запросы? (Используя проценты? Используя vh и vw? Используя пиксели?)
Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/786 ... without-lo