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?

PS : 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.