How to float image over the text in div?

I have a problem with my div style. I want to place the image at the center over text. I’ve tried all of solutions that many websites recommended me but my code still not working.

<div style="max-width: 700px; height: auto; font-family: 'Londrina Outline', serif; font-weight: 400; font-style: normal; font-size: 120px; line-height: 121px; color: #741C28;">HONEY
HONEY
HONEY</div><div style="max-width: 300px; height: 300px; background-image: url(https://i.imgur.com/z9lB88v.png); background-size: 100% 100%;"></div>

These are my code. The imgur is what I want to float and has a text behind it.

Solution

To make the image float on the text you can give an absolute value to its position property: position: absolute;

And create a parent div to position the image on the text and give it flex display: display: flex;

Check this:

<div style="display: inline-flex; justify-content: center; align-items: center;">
    <div style="font-family: 'Londrina Outline', serif; font-weight: 400; font-style: normal; font-size: 120px; line-height: 121px; color: #741C28;">
        HONEY<br> 
        HONEY<br> 
        HONEY<br>
    </div>
    <div style="width: 300px; height: 300px; background-image: url(https://i.imgur.com/z9lB88v.png); background-size: 100% 100%; position: absolute;"></div>
</div>

Hope this is work for you.