Как выровнять элементы с фоном независимо от размера экрана?

Question

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

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

Как я могу исправить эту проблему, используя SASS / CSS?

Answer 1

Вы можете использовать vw css для размещения элемента контента относительно ширины экрана.

<div class="container">
    <div class="content">Content</div>
</div>

.container {
    background: url("//placehold.it/1500x1000") no-repeat;
    background-size: 100% auto;
    height: 1000px;
    position: relative;
}
.content {
    background: #f00;
    padding: 10px;
    position: absolute;
    left: 48vw;
    top: 35vw;
}

Оформить заказ на эту кодовую ручку -> https://codepen.io/moorthy-g/pen/bZYyza