How do I move the form up to an image? - html

Question

I would like to shift the form up to the image. However, I have tried but I still could not shift the whole form up.
Below is the html and css codes:
/* Container holding the image and the text */
.container {
position: relative;
text-align: left;
color: black;
}
/* Encounter issues here, please take a look at the second image*/
.formcontainer {
position: absolute;
top: 8px;
left: 16px;
}
<div class="container">
<img src="https://picsum.photos/1000/600.jpg" class="body">
<h2> Registration </h2>
<div class="formcontainer">
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type ="button" name="submit" value="Submit">
</form>
</div>
</div>
After I have tried using the above .formcontainer css codes:

Answer 1

Just add your image in .container style not using img tag.
.container{
background-image: url("../img/gym.jpg");
}
See the Snippet below:
.container{
background-image: url("https://i.stack.imgur.com/3dbsg.png");
}
<div class="container">
<img src="../img/gym.jpg" class="body">
<h2> Registration </h2>
<div class="formcontainer">
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type ="button" name="submit" value="Submit">
</form>
</div>
</div>

Answer 2

Not a UI expert, but adding the image as background to the parent-div should do.
.container {
background-image: url("https://i.ibb.co/xJCmfmT/test3.jpg");
position: relative;
text-align: left;
color: black;
}

Answer 3

You can do this in couple of ways as far as I know.
set the image as parent div (container here) background using
.container {
background-image: url(IMAGE_URL);
}
set position of formcontainer as absolute
.formcontainer {
position: absolute;
}