Вариант двух бекграундов + картинки

<div class="box">
	<div class="box-item">
		<div class="media">
			<div class="content">
				<div class="text">
				Text
				</div>
			</div>
			<div class="img">
				<img src="https://habrastorage.org/webt/5b/71/62/5b71626c305f0533272208.png" alt="image"/>
			</div>
		</div>
	</div>
</div>

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.box {
  display: flex;
  flex-wrap: wrap;
}
.box-item {
  position: relative;
  min-height: 1px;
  flex: 0 0 50%;
  width: 100%;
  max-width: 50%;
}
.media {
  background-color: #8eafc4;
  min-height: 240px;
  display: flex;
  overflow: hidden;
  max-height: 300px;
  flex-wrap: wrap;
}
.content,
.img {
  min-height: 1px;
}
.content {
  flex: 0 0 65%;
  width: 100%;
  max-width: 65%;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: #43c985;
  padding: 40px 0 40px 40px;
  border-radius: 50%;
  transform: translate(-15%,-20%);
}
.text {
  margin: auto;
  color: #fff;
}
.img {
  flex: 0 0 35%;
  width: 100%;
  max-width: 35%;
  display: flex;
  align-items: center;
  padding: 40px;
  
}
.img img {
  margin: auto;
  position: absolute;
  top: 25%;
  left: 50%;
}