FORM ON IMAGE

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
   .container {
      position: relative;
	  background-image: url("https://s3.studytonight.com/tutorials/uploads/pictures/1629713661-101156.png");
	  background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
	  height: 100vh;	
	  width: 100%;
	  border: 2px solid blue;
   }
   
   .form-content {
      position: absolute;
	  bottom: 10%;
	  right: 5%;
	  background-color: #cccccc;
	  height: 350px;
   }
   input[type=text], input[type=password] {
	  width: 90%;
	  padding: 15px;
	  margin: 5px 0 22px 0;
	  border: none;
	  background: #f1f1f1;
	}
	h1 {
	   text-align: center;
	}
	.btn {
	   background-color: blue;
	   color: white;
	   padding: 16px;
	   margin: 5px;
	}
	label {
	   color: blue;
	   font-size: 16px;
	}
	.btn:hover {
	   background-color: black;
	}
</style>
</head>
<body>
    
    <div class="container">
	  <div class="form-content">
	    <form>
		   <h1>Login</h1>
			<label for="email"><b>Email</b></label>
			<input type="text" placeholder="Enter Email" name="email" required>

			<label for="psw"><b>Password</b></label>
			<input type="password" placeholder="Enter Password" name="psw" required>

			<button type="submit" class="btn">Login</button>
		</form>
	 </div>
	</div>
</body>
</html>