I am trying to give my backgroung blur effect using backdrop filter, but it is not applying to the whole screen. It leaves the bottom part of the screen.
I don't know why, but the screenshot is not uploading so I am sharing the link to screenshot:
link
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Contact.css"/>
<script defer src="Contact.js"></script>
<title>Document</title>
</head>
<body>
<main id="main">
<section>
<h1 id="heading">
CONTACT US
</h1>
<form id="contact" onsubmit="NextPage();return false">
<input type="text" name="name" placeholder="Name" id="name" required/>
<input type="email" name="email" placeholder="E-mail" id="email" required/>
<input type="text" name="sub" placeholder="Subject" id="subject" required/>
<input type="text" name="mess" placeholder="Your Message" id="message" required/>
<textarea rows="5" maxlength="300" placeholder="Type your queries here" name="query" id="query"></textarea>
<button type="submit" name="submit" onclick="NextPage()" id="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>
CSS
body{
height: 100%;
margin: 0;
display: grid;
align-items: center;
justify-items: center;
background-image: url("Background4.jpg");
background-size: cover;
backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
main{
padding-top: 10%;
display: grid;
align-items: center;
justify-items: center;
}
section{
position: relative;
width: 50%;
height: 100%;
display: grid;
text-align: center;
align-items: center;
justify-items: center;
border: 3px solid red;
border-radius: 7px;
background-color: aquamarine;
padding-bottom: 3%;
}
#heading{
color: red;
text-shadow: 50px;
margin-bottom: 20%;
font-size: 30px;
text-decoration: underline;
font-style: italic;
}
#name, #email{
width: 42%;
margin: 1%;
}
#subject{
width: 90%;
margin-bottom: 1%;
}
#message{
width: 90%;
margin-bottom: 1%;
}
#query{
width: 90%;
}
#submit{
width: 30%;
padding: 2%;
margin-top: 10%;
border: 1px dashed red;
border-radius: 7px;
}
input{
border: 1px dashed red;
border-radius: 7px;
}
textarea{
border: 1px dashed red;
border-radius: 7px;
resize: none;
}
Top comments (0)