결과물

주요 코드

<div class="row4">
  <div class="comment">
    <div class="date">No. 151 참새 (2022.03.22 19:24)</div>
	<div class="main">
	  <img id="main_img1"src="static/images/참새.png" alt="배경2사진">
	  <div class="main_text">
		갑자기 미안한데 나도 참다 참다 말하는 건데<br>
		저번에도 그러더니 진짜 실망이야 조금 너 이런식으로 계속
		이면 나는 너에 대한 감정 쌓이고 쌓이고 쌓이면
		<br>
		<br>
		싸이먼도미닉
	  </div>
	</div>
  </div>
</div>

//css
.row4{
  display:flex;
  flex-direction: column;
  overflow:auto;
}
.comment{
  margin:15px;
  margin-bottom: 50px;
}
.date{
  font-family: 'NeoDunggeunmo';
  background-color: rgb(231,231,231);
  padding:10px;
  margin-bottom: 30px;
  flex:0.1;
}
.main{
  display:flex;
  flex-direction: row;
  align-items: center;
}

#main_img1{
  background-image: url("./images/배경2.jfif");
  background-size:contain;
  width:30%;
}

.main_text{
  font-family: 'NeoDunggeunmo';
  font-size:15px;
  margin-left: 20px;
}

해설

먼저 이미지의 경우 프로필 이미지와 배경이미지 두개를 겹쳐서 만들었다.
image태그엔 프로필이미지의 경로를 넣고, image태그에 id값의 background-image속성을 배경이미지로 설정하였다.