CSS Filter: blur(). Как убрать белые края фона?

Question

[Worddoc]

Всем привет. Подгружаю тяжелый фон, после загрузки ставлю вместе размытого фона - прогруженный. Делаю это с эффектом filter: blur. Но проблема в том, что от самого css свойства появляются белые края. Не удается решить проблему даже отрицательным margin/top/left... и родительским overflow: hidden; Может вы знаете какой-либо свой способ? Спасибо!)

<div class="content-wrapper">
  <header class="header">
    <div class="header-parallax-wrapper">
      <div class="header-background" style="background-image: url(img/header-bg-preloader.jpg);
      background-position: center; background-repeat: no-repeat; background-size: cover;"></div>
    </div>
  </header>
</div>

.content-wrapper {
  transition: transform .5s ease;
  position: relative;
  overflow-x: hidden !important;
  box-shadow: 0 0 2000px 2000px #01181E;
  min-width: 100vw;
}
.header-parallax-wrapper {
    width: 100%;
    height: 100%;
}
.header {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    .header-background {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      width: 120% !important;
      height: 120%;
      transition: all 0s linear;
    }
}

Comments

[tema_sun]

Сделайте jsfiddle, или как-нибудь еще покажите.

Answer 1

[Николай]

Я бы так попробовал решить проблему)
codepen.io/Nickolyashka/pen/YZBzBw

Comments

[burhanoff1992]

Спасибо больше, Николай, твоё решение гениальное! :)

[SergeyKiselev2001]

Спасибо! Всё еще актуальное решение!

Answer 2

[Денис Букреев]

нет, пока работает так убого, ничего не поделать

Answer 3

[Сергей Горячев]

Если известна ширина и высота.
https://jsfiddle.net/mz31oy33/
С vw и vh можно использовать calc.