How to place an img behind a card and make it responsive - html

Question

I would like to put an image behind a card and make it responsive
Quite useless to share my code because i really don't know where to go with this problem.
I already tried to put the img in a :after or :before but i could't manage to make it not break the display:flex of the card container, i tried to put it in the card using z-index but it creates a blank space before the text.
So i tried to schematize what i would like to do, thanks a lot! :)
Ugly drawing of what i want :D

Answer 1

you can use position relative to the parent and position absolute to the image which you want to place behind and adjust the top and bottom values
Codepen
.main-row>div{
background-color: #ffd5ff;
border-radius: 24px;
}
.main-row p::first-letter {
color: red;
font-size: xx-large;
}
.main-row .smily {
position:absolute;
top:-35px;
left:-35px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<div class="row main-row d-flex text-justify mt-5 d-flex justify-content-between position-relative">
<img src="https://pngimg.com/uploads/smiley/smiley_PNG155.png" style="height:60px; width:auto;" class="smily">
<div class="col-lg-3 para1 p-4 shadow mb-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi?
Soluta mollitia voluptatibus molestiae, magnam rerum accusamus veritatis minima totam veniam! Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum, fugit harum officia hic quam beatae itaque pariatur atque! Deserunt, provident.</p></div>
<div class="col-lg-3 para2 p-4 shadow mb-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi?
Soluta mollitia voluptatibus molestiae, magnam rerum accusamus veritatis minima totam veniam! Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum, fugit harum officia hic quam beatae itaque pariatur atque! Deserunt, provident.</p></div>
<div class="col-lg-3 para3 p-4 shadow mb-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi?
Soluta mollitia voluptatibus molestiae, magnam rerum accusamus veritatis minima totam veniam! Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum, fugit harum officia hic quam beatae itaque pariatur atque! Deserunt, provident.</p></div>
</div>
<div class="row">
<a class="mx-auto mt-4" href="https://www.neramclasses.com"><strong>show some love by adding this link to your website as a credit</strong></a></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
'