Text in front and image at background at back inside the specific div

Question

I'm trying to create a div where it has front text and background image.

So far, here's my basic html

<div>
    <img src="@userImage" width="90px" height="90px" />
    <div class="footer-field">Hello World</div>
</div>

Here is what the result I get.

But I want something like this from Microsoft word.

I hope somebody helps me. Thank you in advance

Answer 1

Here is a way to do it with background-image and a single html element.

.footer-field {
    width: 190px;
    height: 190px;
    display: grid;
    align-items: center;
    text-align: center;
    color: red;
    background-size: cover;
    background-image: url(https://images.unsplash.com/photo-1559157693-c34156e0f8c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
}

<div class="footer-field">Centered Text</div>