How to put a background image behind div

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

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>