How to put background image directly to a div

Question

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...

Roko C. Buljan · Accepted Answer · 2021-12-25T13:13:01.267

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>

Dear Roko, I've got question about this, I can not properly make the `custom-content` class wider! I mean it collapses the `content-image` — Pouya, Dec 25 '21 at 11:11
Dear @nagidi if I got your question right, add to `.custom` this: `flex-wrap: nowrap;` https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap — Roko C. Buljan, Dec 25 '21 at 12:18

score -2 · Answer 2 · answered Dec 25 '21 at 09:10

-2

I'm not 100% sure about this but it has worked for me in the past,try making the position attribute of the div relative and make it absolute for the image,then size it properly.

answered Dec 25 '21 at 09:10

thenetwork

33
1
6

How to put background image directly to a div

2 Answers2