Adding unusual background to transparent image - html

Question

.half-half-image-text {
padding: 70px 0px;
}
.half-half-image-text h1 {
color: #800000;
}
.half-half-image-text .content {
height: 100%;
display: flex;
align-items: center;
padding: 35px 0px;
}
.half-half-image-text .content p {
font-size: 22px;
}
.half-half-image-text .img {
min-height: 320px;
height: 100%;
border-radius: 10px;
}
<div class="half-half-image-text">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Our Mission</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<div class="content">
<p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="img" style="background: url('https://www.pngall.com/wp-content/uploads/2016/04/Happy-Person-Free-Download-PNG.png')no-repeat center;width:40%"></div>
</div>
</div>
</div>
</div>
Hi What am I trying to achieve is depicted on the screen attached. I am trying to apply to a transparent image a background like this(purple in this example) a shape can be similar.
What am I looking for is a source of knowledge (links ets) for that kind of problem and would very much appreciate the help.