Header flou

CSS

.header2 {
height: 450px;
text-align: center;
overflow: hidden;
}

.absback {
position: absolute;
top: 0;
width: 100%;
}

.background-image {
filter: blur(8px);
height: 100%;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1.05);

}

PHP

<?php if (is_front_page()) { ?>
<!-- page accueil-->
<section class="hero header is-fullheight">
<div class="hero-header">
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-active">
<section class="header-page-accueil">
<div class="logo is-centered">
<a class="logo-footer" href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="logo" class="logo" width="200">
</a>
</div>
<div class="navbar-menu">
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title titre color-white text-shadows is-uppercase"><?php the_title(); ?><?php edit_post_link(' &#9998;'); ?></h1>
</div>
</div>
</section>

<?php } else { ?>

<section class="header2">
<?php $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?>
<!-- get the thumbnail url -->
<?php if (has_post_thumbnail()) { ?>

<div class="background-image" style="background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5) ), url('<?php echo $backgroundImg[0]; ?>');">
<?php } else { ?>
<?php
$curdir = getcwd();
chdir(get_template_directory() . "/css/img/randomblur/");
$files = glob("*.{gif,png,jpg,gif,JPG}", GLOB_BRACE);
chdir($curdir);
$file = $files[array_rand($files)];
?>

<div class="background-image" style="background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5) ), url('<?php echo (get_bloginfo('template_url') . "/css/img/randomblur/$file"); ?>')">
<?php } ?>
</div>
</div>

<div class="hero-body absback">
<div class="container has-text-centered">
<a href="<?php echo home_url(); ?>" title="<?php bloginfo(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo-unnios.svg" alt="logo" class="logo" width="200">
</a>
<h1 class="title color-white text-shadows is-uppercase is-centered mt-5">
<?php the_title(); ?><?php edit_post_link(' &#9998;'); ?>
</h1>
</div>
</div>
</section><!-- / Bannière -->

<?php } ?>