You can set background images in CSS using the background-image and several other properties to control the behavior of the image. Background properties include: background-repeat. background-attachment.
<div class="row">
<div class="col-xl-4 d-flex align-items-stretch">
<div class="single-services-box b1 mt-4 mt-xl-0">
<i class="bx bx-receipt icon"></i>
<h4>Case Management</h4>
<p>Case Management offer culturally sensitive informational counseling to families in crisis. Our intensive case </p>
<div class="text-center">
<a href="case_management.html" class="more-btn">Learn More </a>
</div>
</div>
</div>
</div>
.b1{
background: url("../img/pharmacist.jpg") center center no-repeat;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}.single-services-box{
position: relative;
padding: 40px 38px;
z-index: 1;
overflow: hidden;
-webkit-transition: .5s;
transition: .5s;
}
or
text-align: center;
border-radius: 10px;
background: #fff;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
padding: 40px 30px;
width: 100%;
.single-services-box::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #19ce67;
z-index: -1;
-webkit-transition: .5s;
transition: .5s;
opacity: 0;
visibility: hidden;
}
.single-services-box::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: -1;
-webkit-transition: .5s;
transition: .5s;
}

0 Comments