Text in an image - html

Question

How can I get my first name and last name below to be shown within an image at the top in the middle middle (with a bit of space from the top), and to have their position remain still together with the image when rendering the browser smaller or bigger?
(I have seen this: https://www.w3schools.com/howto/howto_css_image_text.asp, but is there any other way?)
Any help welcome, please
body{
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
text-align: center;
justify-content: center;
align-items: center;
color: white;
}
.bigger{
padding: 30px;
height: 300px;
}
<div>
<img src="https://pbs.twimg.com/media/DYwc96nXkAY1xFh.jpg" class= "bigger">
<h3>First Name</h3>
<h3>Last Name</h3>
</div>

Answer 1

Is that what you want?
Refer to this post for more information.
body{
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
text-align: center;
color: white;
}
.container {
position:relative;
}
.TextContainer {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
<div class="container"><img class="bigger" src="https://pbs.twimg.com/media/DYwc96nXkAY1xFh.jpg"/>
<div class="TextContainer">
<h3>First Name</h3>
<h3>Last Name</h3>
</div>
</div>