Как зафиксировать div блок поверх изображения в background, в нужном месте?

Question

[lbarmen]

Есть фон с background, где есть свечи
Есть div с css, в виде огня
Идея наложить поверх свечей, огонь из css. Но при изменении разрешения экрана, огонь естественно съезжает.
Координаты огня заданы через bottom: 4.7%; left: 48.9%;

пример

Answer 1

[Максим Тимофеев]

Высчитать координаты без js не получится, потому что у Вас
background-size: cover;
Либо меняйте тип масштабирования background или используйте js для расчета координат.
ПС: огонь выглядит странно, его точно надо сменить. Но думаю Вы этот для теста взяли.

Comments

[lbarmen]

Не подскажете js для решения этой задачи?
Огонь и правда не совсем подходящий, взят для примера :)

[Максим Тимофеев]

Не подскажете js для решения этой задачи?

это не 2 строчки. Надо взять размер div, определить большую и меньшую сторону, соответственно поняв, как масштабировано изображение, потом вычислить отступ слева и справа.
Пробуйте, закидывайте на jsfiddle, не получится - поможем.

Кстати вот тут примеров полно, поройтесь:
https://codepen.io/search/pens?q=candle&limit=all&...

Answer 2

[alexandzolotarev]

Очевидно менять размер и самого огня пропорционально картинке.

Answer 3

[cssfish]

1. сделать блок 1-к-1 без всяких cover
2. наложить огонь
3. берем размер экрана (или блоку куда это запихаем), смотрим соотношение сторон.
4. масштабируем блок чтоб входил по нужной стороне (scale) и центрируем (позиционированием)
5. лишнее должна зарезать обертка с overflow

короче говоря - эмулируем cover олдскульными методами, но задачу решаем ))