How to insert text inside an image?

Question

css

How to insert text inside an image?

<div class="content1-down2 col-sm-4">
            <img src="img/vector-smart-object.png" alt="">
            <h4>15</h4>
            <p>Скидка<br>постоянным<br>клиентам</p>
          </div>

Image vector-smart-object.png :

tried it with positioning and it didn't work
.content1-down2 img{
position: relative;
}
.content1-down2 h4{
position: absolute;
}

Answer 1

It's not very clear what exactly you mean, but if suddenly I understood you, then here it is.
Or make this image a background image:

.content1-down2 {
  background-image: url(../img/vector-smart-object.png);
}

Or, if it is critical for you in html markup, position the image absolutely and stretch it to the size of the parent:

.content1-down2 {
  position: relative;
}
img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

Answer 2

Offhand options:
- make the image the background of the div
- absolute positioning

Answer 3

.content1-down2{
position: relative;
}
.content1-down2 h4{
position: absolute;
top: 0;
left:0;
}