How to put background image directly to a div

Issue

I have a div like this:

Now I need to remove a part of the circle from this shape which is shown as below:

Therefore the final shape would be looked like this:

So I decided to put the image as the background of my div.

<div class="col-4 customBack">  
    <div class="mainInfo">
        <div class="circle2">
            <img src="https://sitename.com/images/image.png">   
        </div>
        <div class="paraDivRight2">
            <h6 style="margin-top:5px;"><strong>Lorem Ipsum Dolor Simit</strong></h6>
            <hr style="margin-top:-5px;">
            <p style="margin-top:-10px;">012-3456789</p>
            <p style="padding-top:5px;">ifno@sitename.com</p>
        </div>
    </div>
</div> 

And here are the styles:

.mainInfo{
    background-color: #fff;
    border: .01rem round #e0e1ed;
    border-radius: 20px;
    color: #585CA1;
    width:100%;
    height:5em;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
    margin-top: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customBack{
    background-image: url("/img/shadow3.png") !important;
}

.circle2 {
    position: relative;
    left:-60%;
    width: 9em;
    height: 9em;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}

.circle2 img {
    position: absolute;
    max-width: 85%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.paraDivRight2 {
    position: absolute;
    display: inline-block;
    padding: 10px;
    color:black;
    top:0px !important;
    padding-top:50px !important;
    right: 20px;
    text-align: right;
    padding-right:50px !important;
}

.paraDivRight2 p {
    line-height: 1em;
    font-size: 10pt;
    margin: 0;
    letter-spacing: 1px;
}

As you can see I have put the background in .customBack class But the result is now looks like this:

So the question is, how can I properly place this background image which is (shadow3.png) as background image of this mainInfo div so the side of circle shape that needs to be removed, does not appear...

I'm really stuck with this, so please help me out...

Solution

• Use CSS filter: drop-shadow() MDN Docs on a wrapper element.
• Fix your class naming to use a friendlier convention
• Use CSS flex for a simpler alignment of your elements
• Stop using inline HTML style attributes

/* Quick Reset */

* {
  margin: 0;
  box-sizing: border-box;
}

.custom {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.custom-image {
  width: 9em;
  height: 9em;
  background: #fff;
  border-radius: 50%;
  padding: 1em;
}

.custom-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.custom-content {
  position: relative;
  background: #fff;
  padding: 1em;
  text-align: right;
  border-radius: 0 1em 1em 0;
  padding-left: 2em;
  left: -1em;
}

.custom-content h4 {
  border-bottom: 1px solid #ddd;
}

<div class="custom">
  <div class="custom-image">
    <img src="https://i.stack.imgur.com/qCWYU.jpg?s=256&g=1">
  </div>
  <div class="custom-content">
    <h4>Lorem Ipsum Dolor Simit</h4>
    <p>012-3456789</p>
    <p>ifno@sitename.com</p>
  </div>
</div>

Answered By - Roko C. Buljan