I am experiencing an issue where the background image is being blurred along with the content. Despite trying to adjust the z-index, it seems like it's not working as expected. Below is the HTML code, and I would appreciate a solution with an explanation:
<!DOCTYPE html>
<html>
<head>
<title>Student-login</title>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="body">
<div class="main-form">
<h1>Student Login</h1>
<form class="login">
<input type="text" placeholder="*User name" name="user_name"></input><br>
<input type="password" placeholder="*Password" name="user_name"></input><br>
<input type="button" value="Login"></input><br>
<div class="button"><a href="register.html">Register</a></div>
</form>
</div>
</div>
</body>
</html>
Here is the CSS file:
.body{
position: absolute;
top: -20px;
left: -20px;
right: -40px;
bottom: -40px;
width: auto;
height: auto;
background-image: url("background.jpg");
background-size: cover;
-webkit-filter: blur(5px);
filter:blur(5px);
z-index: 0;
}
h1{
font-family: 'Shadows Into Light', cursive;
color: #282828;
text-align: center;
margin: 2%;
}
.main-form{
float: right;
margin-top: 3%;
height:auto;
border-radius: 3px;
background:#F0F0F0;
opacity: .6;
padding-top: 1%;
padding-left: 4%;
padding-right: 4%;
padding-bottom: 1%;
z-index: 1;
}
.login input[type="text"]{
width: 260px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
}
.login input[type="text"]:focus{
border: 1px solid #0033FF;
}
.login input[type="password"]{
width: 260px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
}
.login input[type="password"]:focus{
border: 1px solid #0033FF;
}
.login input[type="button"]{
width: 265px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
}
.login input[type="button"]:hover{
background-color: #404040;
color: white;
}
.button {
width: 270px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
text-decoration: none;
color:black;
text-align: center;
}
.button a{
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
text-decoration: none;
color:black;
text-align: center;
}
.button:hover{
background-color: #404040;
}
.button:hover a{
color: white;
}
.login select{
width: 265px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
}
.login select:hover{
background-color: #404040;
color: white;
}
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}