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

Question

[godsplane]

Рамка телефона и контент внутри нее это как бы разные объекты, как это по правильному расположить максимально адаптивно и круто?
У меня изначально была идея родительскому блоку задать бэкграунд рамкой телефона и внутри прописать img, но у меня почему то картинка перекрывает бэкграунд. Это верное направление или нет?

Answer 1

[xdevelx]

У меня изначально была идея родительскому блоку задать бэкграунд рамкой телефона

Фон прописать для псевдоэлемента (с position absolute) родителя. И через z-index вынести псевдоэлемент наверх.

P.S. Как правильно заметила Ankhena, если нужно взаимодействие с изображением чата (hover, click) то псевдоэлементу лучше прописать в стили pointer-events: none;, чтобы он собой не перекрывал для взаимодействия с нижележащими элементами.

Answer 2

[Elvin_Fich]

Используй display: flex; в блоке который надо поправить