How to make psd image in html - html

Question

I am working on project where in final result, I need to have like this
As you can see in modal, there is background-image and 2 icons, my problem is I don't know how to make it,
I did a div with image background but for icons I have them in psb format and I don't know how to put them on the background in beautiful way .
I tried to screen part of icon and put it but it wasn't good
<section id="about">
<div class="container-fluid mt-0" style="background-image: url(background.png);background-size:cover;height:550px">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading mt-5">Nos activités</h2>
</div>
</div>
<div class="row text-center" >
<div class="col-md-6 image" >
<img src="icon1.png">
</div>
<div class="col-md-6" style="padding-top: 100px">
<img src="icon2.png">
</div>
</div>
<!--
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading ">Nos dernières réalisataions</h2>
</div>
</div>
</div>-->
</section>

Answer 1

This is the structure I'm doing - just replace the images and add the font type
.activities {
background-image: url('http://inspirationhut.net/wp-content/uploads/2013/05/61.png');
background-position: center;
background-size: cover;
width: 100%;
min-height: 100vh;
}
.activities .title {
margin: 0;
padding: 25px 0;
color: #5ABF28;
font-weight: bold;
}
.activities .row {
min-height: calc(100vh - 135px);
align-items: center;
}
.activities .activity {
display: block;
text-decoration: none;
margin: 10px auto;
}
.activities .activity p {
font-weight: bold;
color: #999;
}
.activities .activity button {
width: 30px;
height: 30px;
line-height: 0;
border-radius: 100%;
padding: 0;
margin: 0;
outline: 0;
background: none;
border: 2px solid #aaa;
font-size: 20px;
color: #999;
padding-bottom: 10px;
}
.activities .activity:hover p,
.activities .activity:hover button {
color: #5ABF28;
border-color: #5ABF28;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="activities text-center">
<div class="container">
<h2 class="title pt-5">Nos activités</h2>
<div class="row">
<div class="col-sm">
<a href="#" class="activity">
<img src="https://www.ikea.com/in/en/images/products/smycka-artificial-flower__0903311_PE596728_S5.JPG?f=s" alt="icon 1" height="120" />
<p class="text-uppercase mt-3">entretien de jardin</p>
<button>...</button>
</a>
</div>
<div class="col-sm">
<a href="#" class="activity">
<img src="https://www.ikea.com/us/en/images/products/smycka-artificial-flower-rose-white__0903190_PE596774_S5.JPG" alt="icon 1" height="120" />
<p class="text-uppercase mt-3">creation de jardin</p>
<button>...</button>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>