How to put a background image behind div - html

Question

I am trying to put my background behind the div that contains a jumbotron, but the div keeps on staying below the background image, instead of appearing on it. How do I fix this?
P.S : I do not want to put the background image in my CSS file for some reasons, so i want the image src to only be in my HTML. Many thanks!
Here is my code :
<div class="container-fluid" >
<img src='U_Thant_PIC_3.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>

Answer 1

In order to achieve this you need to tell the browser to position the img element behind your child div. For the purpose you can use the position attribute, with the img having a lower z-index.
The z-index does work for this, as long as you have position properties on the elements:
div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>

Answer 2

Try this;
HTML
<div class="container-fluid">
<img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
<div class="jumbotron jumbotron-fluid">
<h2 class="a">Cats are cool
</div>
</div>
CSS
.jumbotron {
position: absolute;
left: 50%;
}
It will give you centered text on top of your image.

Answer 3

Add position: absolute; into the class="jumbotron jumbotron-fluid", and move your <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> to the bottom of code.
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.jumbotron {
color: white;
position: absolute;
}
<div class="box">
<div class="jumbotron">
textbox
</div>
<img src="https://www.w3schools.com/css/img_lights.jpg">
</div>

Answer 4

You need set up first the parent element with position: relative; in this case you should add the css below.
.container-fluid { position:relative }
and then you need to set up the jumbotron with the next style.
.jumbotron { position: absolute }
with this should be work, also you can move the .jumbotron with the top, bottom, left and right positions, for example:
.jumbotron { position: absolute; top: 20px; left: 10px; }
In this way .jumbotron will move in the area with the first position: relative; taken. In this case in the area of .container-fluid class.
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Here I give you and example:
https://jsfiddle.net/mnL8cvf2/2/
Hope this can help you.