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

Question

[Анастасия]

Всем привет
У меня есть вот такой сайт для верстки и мне нужен совет. Подскажите, пожалуйста, как лучше всего разместить изображения по правой стороне (женщина и кабинет), при условии что при адаптации, изображение это сплошной круг, который должен находиться под текстом.
Хедер не фиксирован.
Буду очень благодарна за совет

Comments

[Артём Ведищев]

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

[Ankhena]

Ставите на фон картинку, верхним фоновым слоем радиальный градиент.
По мотивам вот этого https://jsfiddle.net/sk8fz1pu/
На мобилках сдвигаете женщину и градиент в центр. Получаете круг.

Альтернатива: на мобилках убираете фон, но задаете псевдоэлемент, ему border-radius и женщину на фон. Всему этому абсолют и z-index -1.

spoiler

Answer 1

[HamSter]

Например: jsbin

Обертке задаем: position:relative;
Картинке: position: absolute; + позиционируем с помощью top, right.
Для мобильных разрешений: сбрасываем у картинки абсолютное позиционирование и задаем ей position:relative; или position: static;