Перемещение HTML-изображения в зависимости от изменения размера окна ⇐ CSS

[Гость]

У меня есть HTML-страница с фоном (белый фон и наклоненная черная линия). У меня есть красный шар. Как вы видите на картинке ниже, мне бы хотелось, чтобы при изменении размера окна мяч оставался прямо над линией (как в начале картинки)

Есть ли способ сделать это в HTML/CSS? Я готов использовать Javascript, если есть простое решение JS.
Вот мой текущий код:
HTML:

Код: Выделить всё

[img]./assets/ball.png[/img]

и CSS:

Код: Выделить всё

    body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
height: 100vh;
width: 100%;
flex-direction: column;
background-image: url('./assets/bg.png');
background-repeat: no-repeat;
background-size: cover;
}

.image {
margin-top: 42%;
}

Источник: https://stackoverflow.com/questions/781 ... w-resizing