Placing div on image - html

Question

How i can place my div with button, form and other content on an image like this picture. I have already placed the text on this image using this code:
.img-wrap {
position: relative;
}
.img-wrap h1 {
position: absolute;
left: 41.5%;
bottom: 45%;
background: rgba(255, 255, 255, 0.9);
height: 20%;
width: 17%;
padding: 3% 0px 0px 2.4%;
font-size: 2.3vw;
font-weight: bold;
color: rgba(0, 0, 0, 1);
font-family: Alegreya Sans black;
}
<div class="container-fluid">
<div class="row">
<div class="img-wrap">
<img src="...\images\main-foto.jpeg" class="img-responsive">
<h1>Funny Island</h1>
</div>
</div>
</div>
I tried to place my div on the same way, but it doesn't work.
.img-wrap {
position: relative;
}
.img-wrap div {
position: absolute;
width: 1000px;
height: 900px;
background-color: grey;
}
<div class="container-fluid">
<div class="row">
<div class="img-wrap">
<img src="...\images\main-foto.jpeg" class="img-responsive">
<h1>Funny Island</h1>
<div>
</div>
</div>
</div>
</div>
Thanks for the help

Answer 1

Add the image as a background image on .img-wrap. You can then add the buttons, text etc inside the div.
.img-wrap {
position: relative;
background-image: url( 'http://placekitten.com/500/300' );
background-size: cover;
text-align: center;
padding: 50px;
color: red;
}
<div class="container-fluid">
<div class="row">
<div class="img-wrap">
<h1>Funny Island</h1>
<div>
<p>Some text here</p>
<button>Button here</button>
</div>
</div>
</div>
</div>

Answer 2

You can use a negative on themargin-bottom of the element that you wish to contain the image. This will pull the element containing your form content up and above the element with the image inside it. See below for a demo:
.image-container {
height: 50vh;
background: red;
margin-bottom: -200px;
}
.content-container {
height: 150vh;
max-width: 960px;
margin: auto;
background: blue;
}
<div class="image-container"></div>
<div class="content-container"></div>

Answer 3

Another option is to add top or left properties to img-wrap div to position it where you want.
.img-wrap div{
position: absolute;
width:1000px;
height: 900px;
background-color: grey;
top:100px;
left:100px;
}