Add background image to the bottom of div

I have the following HTML / CSS code:

<div class="tip">
    Some tip text
</div>

div.tip {
   background: green url("green-tip.png") no-repeat center bottom / 100% auto;
   border-radius: 4px;
}

Basically I need to replicate the design:

The green-tip.png is just the pointer in the bottom:

However I get only a rectangle with round corners without the pointer in the bottom.

How to do this?

Use multiple background layer:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div.tip {
  --h: 50px; /* height of the bottom part */

  border-radius: 18px 18px 0 0;
  height: 200px;
  width: 222px;
  padding: 10px;
  background: 
   linear-gradient(rgb(42 157 143) 0 0)
    top / 100% calc(100% - var(--h)) no-repeat,
   url("https://i.stack.imgur.com/qN0S5.png") 
    bottom / 101% var(--h) no-repeat;
}

<!-- language: lang-html -->

<div class="tip">
  Some tip text
</div>

<!-- end snippet -->

An easy way to do this would be to add another div at the bottom:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div.tip {
  background: rgb(42, 157, 143);
  border-radius: 18px 18px 0 0;
  height: 100px;
  width: 222px;
  box-sizing: border-box;
  padding: 10px;
}

.bottom {
  background: url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
  height: 42px;
  width: 223px;
}

<!-- language: lang-html -->

<div class="container">
  <div class="tip">
    Some tip text
  </div>
  <div class="bottom">
  </div>
</div>

<!-- end snippet -->

Another way, using ::after pseudoelement (useful if you want to use it in several places on your site):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div.tip {
  background: rgb(42, 157, 143);
  border-radius: 18px 18px 0 0;
  height: 100px;
  width: 222px;
  box-sizing: border-box;
  padding: 10px;
}

.container::after {
  background: url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
  display: block;
  content: "";
  height: 42px;
  width: 223px;
}

<!-- language: lang-html -->

<div class="container">
  <div class="tip">
    Some tip text
  </div>
</div>

<!-- end snippet -->

If you want the image to be part of the background as well, a simple (not necessarily most extendable) way of doing this would be to set both as background divs and place them in vertical block together

CSS

Here's your rectangle style class:

.rounded-top-rectangle {
    width: 100px;
    height: 300px;
    background-color: #f0f0f0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 10px;
}

Here's your image style class:

.image-below {
    display: block;
    width: 100px; /* Adjust this to control the size of the image */
    height: auto; 
    background-image: url('green-tip.png'); /* or similar */
    background-size: cover;
    background-repeat: no-repeat; 
}

HTML

<div class="rounded-top-rectangle"></div>
<div class="image-below"></div>