Как отпозиционировать элемент относительно декоративного элемента фона?

Question

[KralisV]

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

Comments

[Вадим]

так этоже тоже просто фоновая картинка.
Про множесвтенные фоны знаете?
Про возможность позиционировать фоновую картинку знаете? Типа background-position: right 20px bottom 20px? Поддерживаются так же и проценты.

[Ankhena]

Если вы уверены в том, что фон и мужик всегда должны иметь одинаковое взаиморасположение, то можно:
1. Слить мужика и фон в одно изображение.
2. Использовать относительные единицы (%, vw) и пропорции.

Я вот не очень уверена в этом.
Либо тогда и тексты и все остальное должно масштабироваться также. Т.е. vw, clamp и т.д.

Очевидная проблема в том, что при расширении экрана, отличимом от макета все сломается.

Сначала нужно описать как оно должно себя вести на самом деле на родном языке. Можно нарисовать.
Т.е. что от чего зависит, как и куда должно или не должно двигаться. К какой точке прибито, если не должно. И т.д.

Либо спросить у дизайнера, если с ним есть связь и это его дело, а не ваше.

[ksnk]

Если по каким-то причинам комментарий @Вадим'а не подойдет, к примеру, верхние активные элементы тоже могут свободно "гулять" по экрану, то придется вручную позиционировать элемент, с помощью javascript. На каждый onresize перевычислять с каким зумом и в какое место нужно поместить картинку. Зум и положение можно расчитать как верх - верх надписи "Best SEO & ...", низ - верхний край нижнего блока меню (Website & Social...) Ну и чтобы вправо не вываливалось...

Answer 1

[Фархад Асадов]

Медиа запросы