Как можно устранить проблему на видео, чтобы спаны не ехали при уменьшении разрешения?

Question

[Евгений Ромашов]

https://www.loom.com/share/c4a64d758d794c9f8860003..."

Ситуация такая, у меня есть фон, заданный свойством background-image. В той же секции есть много спанов, по наведении на которые срабатывает событие вызова модального окна. Всё было бы отлично, но при уменьшении разрешения или, полагаю, увеличении, спаны едут и они, будучи абсолютно спозиционированными относительно родителя - секции, где задан фон, оказываются не там где были изначально.

Это очень печально, так как делать медиа запросы через каждые 20 пикселей ещё печальнее. Может быть есть способ как сделать чтобы они не ехали, может быть получать координаты через js, хотя мне кажется это не исправит проблему. Надо как то сделать, чтобы при уменьшении разрешении всё масштабировалась и спаны оказывались там же. Есть идеи?

Answer 1

[Евгений Ромашов]

.main-screen {
    background-image: url("/img/castle/bg_castle.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    position: relative;
}

Это код секции с фоном, то как установлен фон.