Im trying to add a blur to the background but it wont work that way. It blurs everything except the background..
.login-page,
.register-page {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
-ms-flex-pack: center;
justify-content: center;
background-image: url("../../images/bg.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Looks like this on the page : enter image description here
The login.blade.php code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SunnyStateNET | Login</title>
@include('layouts.template-parts.head-scripts')
</head>
<body class="hold-transition login-page">
<div class="dark-mode login-box">
<!-- /.login-logo -->
<div class="card card-outline card-primary">
<div class="card-header text-center">
<b>Melde dich mit deinen Daten an.</b>
</div>
<div class="dark-mode card-body">
@if($message = Session::get('error'))
<div class="alert alert-danger text-center" role="alert">
<strong>{{$message}}</strong>
</div>
@endif
<form method="POST" action="{{ route('postlogin') }}">
@csrf
<div class="input-group mb-3">
<input type="text" name="username" class="form-control" placeholder="Charaktername">
</div>
<div class="dark-mode input-group mb-3">
<input type="password" name="password" class="form-control" placeholder="Passwort">
</div>
<div class="row">
<!-- /.col -->
<div class="col-lg-12">
<button type="submit" class="btn btn-dark btn-block">Anmelden</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.login-box -->
@include('layouts.template-parts.footer-scripts')
@method('scripts')
</body>
</html>
Hope someone could hit me with a hint because i think iam going crazy from this
