Как сверстать такой элемент?

Question

[Сергей Соболь]

Подскажите, как сверстать этот круг так, чтобы он закреплялся исключительно на краю картинки? Картинка на заднем плане сделана через background. В голове - использовать только position absolute для круга, но тогда при изменении разрешения - сбивается изображение.

Как правильно сверстать?

Comments

[Alex Krynytskyi]

https://codepen.io/NeomanceR/pen/QWGBZgL
вот так можно

Answer 1

[Дмитрий]

В background можно указать несколько картинок с разным позиционированием

Answer 2

[approximate solution]

Можно сделать вот так:

1.Создаете общий wrapper, где флексами у вас 2 потомка.
2.У потомков есть своя ширина(50%) и position: relative;
3. Правому потомку с bg, даете абсолютно спозиционированную картинку, которая всегда будет прижата к нижнему левому краю. right: 0, меняете на left:-0 и выравниваете элемент как вам нужно.

Answer 3

[Lord_Dantes]

Сделать круг вместе с фоновой картинкой, и через background-position сделать сверху справа.

Comments

[alex4answ]

если это не 2 разных блока, разве не будет сложностью с адаптивом?
В том плане что текст будет наезжать на картинку

[Lord_Dantes]

alex4answ, у автора спросите. Я предложил самое легкое и нужное решение.

[alex4answ]

Lord_Dantes, ок, я думал мб есть какой-нибудь хак, или что-то чего я не знаю, потому что это проблема #1 с которой столкнется автор )

[Lord_Dantes]

alex4answ, в адаптиве можно менять картинку, а также делать background-position. Но это от дизайнера зависит куда он "засунет" этот кружок.

[alex4answ]

Lord_Dantes, ну да, я про это и говорю, я просто сталкивался мильон раз с таким, и там либо очень криво-косо будет, либо много breakpoint'ов будет, хотя мб можно будет поколдовать с % значениями )

Answer 4

[Alex Krynytskyi]

через псевдоэлемент :after или :before вставь круг и позиционируй как тебе нужно и при ресайзе всё будет хорошо.
Но это не единственное решение но вроде как самое простое.

Answer 5

[xdevelx]

А почему у вас контентная картинка сделана фоном? Она должна быть img. Как бы и логично, что изображение иллюстрирует качели для ребенка рядом с соответствующим текстом. Вот и позиционируйте круг относительно самого изображения или враппера для img тега.