How to stack HTML elements on top of each other - html

Question

I would like to make the background an image. All my other HTML elements will go on top of it. The problem is that it won't stack. Every time I try, the text just goes to the bottom. Also, I want to use vanilla HTML and CSS and do not want to use canvas. This is my code.
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
.navBar:hover {
border: 2px solid black;
}
h3 {
z-index: 2;
}
<div class="navBar" onclick="toHomePage()">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<img src="..." width="100%" height="100%">
<h3>Blablabla</h3>
<br>
<h3>01234567890</h3>

Answer 1

I don't know if there is a reason as to why the image has to be in the html, but why not use it in the css directly?
background: gainsboro url(...) left / cover no-repeat;

Answer 2

By doing some code change this will works.
HTML
<div class="main">
<img src="https://rajeshdoot.com/niwax-demos/html/images/about/about-dg-agency.jpg" width="100%" height="100%">
<div class="title">
<h3>Blablabla</h3>
<br>
<h3>01234567890</h3>
</div>
css
.main {
position: relative;
}
.main .title {
z-index: 2;
position: absolute;
top: 50%;
}

Answer 3

Like the previous contributor suggested, use the css background-image property instead of embedding an image.
See this jsfiddle here: https://jsfiddle.net/6zo9h08m/
I used your example code, removed the img element and added a css selector for the body that sets a background-image instead.
.navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
.navBar:hover{
border: 2px solid black;
}
h3{
z-index: 2;
}
body{
background-image: url('https://via.placeholder.com/150/FF0000/FFFFFF')
}

Answer 4

You can change background image position to 'fixed' and z-index can be less than navbar.
style ="position:fixed; z-index:1; top:0px; left:0px;"
Instead of inline, you can also give css cass to image tag and css above.
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
.navBar:hover {
border: 2px solid black;
}
h3 {
z-index: 2;
}
<div class="navBar" onclick="toHomePage()">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<img src="..." style ="position:fixed; z-index:1; top:0px; left:0px;" width="100%" height="100%">
<h3>Blablabla</h3>
<br>
<h3>01234567890</h3>