Как также, как в скриншоте, расположить картинку в блоке (CSS/HTML)?
Абсолютом.
Блоку с картнкой даете все стили position: absolute; left: 0; top: Xpx;
Синему блоку position: relative;
.blueFooter {
  position: relative;
}
.image {
  position: absolute;
  top: -105px; // 50% высоты картинки
  left: 55px;
  border-radius: 50%;
  border: 8px solid #этоттемносинийцвет
}