BLUR BACKGROUND IMAGE

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
    
	.container {
	  position: relative;
	  background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627476216-101156.png");
	  background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
	  height: 100vh;
	  width: 100%;

	}
	.blur {
	  text-align: center;
     
      width: 50%;
	  backdrop-filter: blur(5px); /* blur effect to the backdrop */
	  background-color: rgba(255, 255, 255, 0.2);
	  font-size: 30px;
	  height: 100vh;
	  width: 50%;
	}
	
</style>
</head>
<body>
   <div class="container">
		<div class="blur">
			<h2> Blurred background image </h2>
		</div>
    </div>	
</body>
</html>